Animated sliding divs on click button, .prev .next jQuery
By
User
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/
I have a 2.67 GHz Celeron processor, 1.21 GB of RAM on a x86 Windows XP Professional machine. My understanding is that the Android emulator should start fairly quickly on such a machine, but for me it does not. I have followed all instructions in setting up the IDE, SDKs, JDKs and such and have had some success in staring the emulator quickly but is very particulary. How can I, if possible, fix this problem?
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/