Ccna final exam - java, php, javascript, ios, cshap all in one. This is a collaboratively edited question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
Friday, January 13, 2012
Animated sliding divs on click button, .prev .next jQuery
Trying to make a sliding panel where you can click next and back to go between panes, Ive attached a fiddle to explain better, only my back button doesnt seem to work, Can anybody see why?
It doesn't appear to work because you're moving Slide 2 on top of Slide 1, but clicking the back button in Slide 2 manipulates Slide 1. While Slide 2 stays in place and on top.
This might be what you want: http://jsfiddle.net/ZuWeJ/
you have to modify your code a little bit - http://jsfiddle.net/x2qk7/7/
ReplyDelete<div class="form-slides">
<div class="wrap">
<div class="slide">
<p>Lipsum blah blah blah</p>
<a href="#" class="next">Next</a>
<a href="#" class="back">back</a>
</div>
<div class="slide">
<p>Lipsum blah blah blah</p>
<a href="#" class="next">Next</a>
<a href="#" class="back">back</a>
</div>
<div class="slide">
<p>Lipsum blah blah blah</p>
<a href="#" class="next">Next</a>
<a href="#" class="back">back</a>
</div>
</div>
</div>
.form-slides {width:400px; overflow:hidden; border: 1px solid #ccc; margin: 25px}
.wrap { width: 9999px; }
.slide {width:400px; float:left; position: relative; background:#eee;}
$(document).ready(function(){
$('a.next').click(function(){
$('.slide').animate({"left": "-=400"}, 500);
})
$('a.back').click(function(){
$('.slide').animate({"left": "+=400"}, 500);
})
});
It doesn't appear to work because you're moving Slide 2 on top of Slide 1, but clicking the back button in Slide 2 manipulates Slide 1. While Slide 2 stays in place and on top.
ReplyDeleteThis might be what you want:
http://jsfiddle.net/ZuWeJ/