点击按钮，动画滑动divs .prev .next jQuery

Question

试图做一个滑动面板，你可以点击下一步，然后回到窗格之间去， 我附加了一个小提琴更好地解释，只有我的后退按钮似乎没有工作，任何人都可以看到为什么？

http://jsfiddle.net/x2qk7/3/

Answer 1

必须修改你的代码一点点

$(document).ready(function(){ 
 
    $('a.next').click(function(){ 
 
    $('.slide').animate({"left": "-=400"}, 500); 
 
    }) 
 
    $('a.back').click(function(){ 
 
    $('.slide').animate({"left": "+=400"}, 500); 
 
    }) 
 
});

.form-slides {width:400px; overflow:hidden; border: 1px solid #ccc; margin: 25px} 
 
.wrap { width: 9999px; } 
 
.slide {width:400px; float:left; position: relative; background:#eee;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<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>

Answer 2

它似乎没有工作，因为你在幻灯片1的顶部移动幻灯片2 ，但单击幻灯片2中的后退按钮可处理幻灯片1.幻灯片2保持原位并位于顶部。

这可能是你想要的： http://jsfiddle.net/ZuWeJ/