idoteowlemo
New Member
I have written a small div slider which scrolls images put in the div after every 5 secs and also there are two arrows on the side that trigger the sliding immediately. well this is not important, when the images slide towards their left or right or whenever they slide automatically I want there to be some kind of animation happening on the images like fading or cutting instead of just sliding. Javascript code:\[code\] <script type="text/javascript"> function createSlider(el_left, el_right, items) { var index = 0; var refreshId; var items=$('.box'); var restartAnimation = function() { clearInterval(refreshId); refreshId = setInterval( function() { var $this = items.eq(index); $this.animate({ left: '-50%' }, 500); index = (index + 1) % items.length; var $next = items.eq(index); $next.css('left', '150%'); $next.animate({ left: '50%' }, 500); },5000); } restartAnimation() el_left.click(function() { restartAnimation(); var $this = items.eq(index); $this.animate({ left: '-50%' }, 500); index = (index + 1) % items.length; var $next = items.eq(index); $next.css('left', '150%'); $next.animate({ left: '50%' }, 500); }); el_right.click(function() { restartAnimation(); var $this = items.eq(index); $this.animate({ left: '150%' }, 500); index = (index - 1) % items.length; var $next = items.eq(index); $next.css('left', '-50%'); $next.animate({ left: '50%' }, 500); });}createSlider($('.Animate'), $('.Animate2'), $('.box')) </script>\[/code\]HTML code:\[code\] <div id="container" class="imageSlider"> <div id="box1" class="box"><img style="height: 190px;width: auto;vertical-align: middle;margin: 0px 50px 12px 0px;" src="http://stackoverflow.com/questions/14038732/images/image1.png" class="emages"></div> <div id="box2" class="box"><img style="height: 185px;width: auto;vertical-align: middle;" src="http://stackoverflow.com/questions/14038732/images/image2.png" class="emages"></div> <div id="box3" class="box"><img style="height:264px;margin-top:0px;margin-left: 200px;width:auto;" src="http://stackoverflow.com/questions/14038732/images/image3.png" class="emages"></div> <div id="box4" class="box"><img style="height: 265px;width: auto;vertical-align: middle;margin: 51px 60px 0 -31px;" src="http://stackoverflow.com/questions/14038732/images/image4.png" class="emages"></div> <div id="box5" class="box"><img style="height: 194px;width: auto;vertical-align: middle;" src="http://stackoverflow.com/questions/14038732/images/image5.png" class="emages"></div> <div id="box6" class="box"><img style="height: 230px;width: auto;vertical-align: middle;margin: -50px 50px;" src="http://stackoverflow.com/questions/14038732/images/image6.png" class="emages"></div> <div id="box7" class="box"><img style="height: 230px;width: auto;vertical-align: middle;margin: -50px 50px;" src="http://stackoverflow.com/questions/14038732/images/image7.png" class="emages"></div> <div><input type="image" id="animate1" src="http://stackoverflow.com/questions/14038732/nav-left.png" class="Animate"></div> <div><input type="image" id="animate2" src="http://stackoverflow.com/questions/14038732/nav-right.png" class="Animate2"></div></div>\[/code\]CSS code:\[code\]#container { position: absolute; margin: 120px auto; padding: 0px; width: 700px; height: 350px; overflow: hidden; left: 24%;}.box { position: absolute; width: 100%; height: 300px; line-height: 300px; font-size: 15px; text-align: center; left: 150%; top: 84px; margin-left: -48%; color: white;}#box1 { left: 50%;}#box2 {}#box3 {}#box4 {}#box5 {}#box6 {}#box7{}\[/code\]So this is my complete code. And it is working properly, only thing I want is that when the images scroll I want them to scroll in style or with some animation.