June 7, 201313 yr Hi all, I'm quite new to jQuery so I've probably got this a bit wrong. I've made an animated slider but when I click the purple nav square to move to the next panel, the new nav squares don't animate in at the same time, the first one does then the second. should I be grouping the elements somehow and fading them in as one? I've tried googling this and read about '.add' but it's doing the same thing. Thanks guys <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <script type="text/javascript"> $(document).ready(function() { <!-- Hide all nav boxes except rightA --> $("#leftA").css("display","none"); $("#leftB").css("display","none"); $("#leftC").css("display","none"); $("#rightB").css("display","none"); $("#rightC").css("display","none"); $("#leftArrowWrap").css("display","none"); <!-- Click right box panelA, animates to panelB --> $('#rightA').click(function() { $('#rightArrowWrap, #leftA, #rightA').fadeOut(500); $("#slider").delay(800).animate({ left: -500 }, {duration: 1000, easing: 'easeInOutBack'}) $('#leftArrowWrap, #rightArrowWrap, #leftB, #rightB').delay(2000).fadeIn(500); }); <!-- Click left box panelB, animates to panelA --> $('#leftB').click(function() { $('#leftArrowWrap, #rightArrowWrap, #leftB, #rightB').fadeOut(500); $("#slider").delay(800).animate({ left: 0 }, {duration: 1000, easing: 'easeInOutBack'}) $('#rightArrowWrap, #rightA').delay(2000).fadeIn(500); }); <!-- Click right box panelB, animates to panelC --> $('#rightB').click(function() { $('#leftArrowWrap, #rightArrowWrap, #leftB, #rightB').fadeOut(500); $("#slider").delay(800).animate({ left: -1000 }, {duration: 1000, easing: 'easeInOutBack'}) $('#leftArrowWrap, #leftC').delay(2000).fadeIn(500); }); <!-- Click left box panelC, animates to panelB --> $('#leftC').click(function() { $('#leftArrowWrap, #leftC').fadeOut(500); $("#slider").delay(800).animate({ left: -500 }, {duration: 1000, easing: 'easeInOutBack'}) $('#leftArrowWrap, #rightArrowWrap, #leftB, #rightB').delay(2000).fadeIn(500); }); }); </script> <style type="text/css"> #wrap{ width:500px; height:200px; overflow:hidden; position:relative; background-color:gray; } #leftArrowWrap{ width:50px; height:50px; top:70px; position:absolute; background-color:gray; z-index:5; } #rightArrowWrap{ width:50px; height:50px; top:70px; right:0px; position:absolute; background-color:gray; z-index:5; } .arrowLeft{ width:30px; height:30px; position:absolute; top:10px; left:10px; background-color:purple; cursor:pointer; } .arrowRight{ width:30px; height:30px; position:absolute; top:10px; right:10px; background-color:purple; cursor:pointer; } #slider{ width:1500px; height:180px; margin-top:10px; position:absolute; background-color:pink; } .panel{ width:500px; height:180px; float:left; } </style> </head> <body> <div id="wrap"> <!-- Left Nav--> <div id="leftArrowWrap"> <div class="arrowLeft" id="leftA"></div> <div class="arrowLeft" id="leftB"></div> <div class="arrowLeft" id="leftC"></div> </div> <!-- Right Nav--> <div id="rightArrowWrap"> <div class="arrowRight" id="rightA"></div> <div class="arrowRight" id="rightB"></div> <div class="arrowRight" id="rightC"></div> </div> <!-- Content--> <div id="slider"> <div class="panel" style="background-color:blue"></div> <div class="panel" style="background-color:red"></div> <div class="panel" style="background-color:orange"></div> </div> </div> </body> </html>
June 7, 201313 yr Author Sorry, thought I got emailed new replies. Yeah example here http://goo.gl/H5d9M thank you Edited June 7, 201313 yr by drennan
June 7, 201313 yr Author You could do some thing like $('#id1, #id2').fadeOut(); That's what I've done isn't it? $('#leftArrowWrap, #rightArrowWrap, #leftB, #rightB').delay(2000).fadeIn(500);
June 7, 201313 yr ahhh sorry i missed that :|, the web demo is down can you re-upload and ill have a proper look
June 7, 201313 yr Author Just updated the URL above as the demo space expired after 15 minutes! No wonder it was free. Cheers
June 7, 201313 yr this has got me stumped :| ill go have a bite to eat and if its not fixed by i get back ill have another look
June 11, 201313 yr Looking at this tutorial http://www.webchiefdesign.co.uk/blog/simple-jquery-slideshow/index.php it would be quite easy to implement what your trying to do Edited June 11, 201313 yr by mteam
June 11, 201313 yr Author Looking at this tutorial http://www.webchiefdesign.co.uk/blog/simple-jquery-slideshow/index.php it would be quite easy to implement what your trying to do Cheers for the link, I'll give that a go. Looks like my method isn't the best way to make a slideshow but it seemed kinda logical to me Edited June 11, 201313 yr by drennan
Create an account or sign in to comment