如何滑动Div按钮单击

我试图制作一个像这样的滑动表单按钮，我不熟悉JQuery请建议。

Html： –

 
 
 Conferm Location  Continue 
 
 Area  Continue 
 
 Email Address  Continue 
  

Jquery： –

  $('.slideNext').click(function() { $('.slideBox').animate({ left: '-50%' }, 500, function() { $(this).css('left', '150%'); $(this).appendTo('#introFormHome'); }); $(this).next().animate({ left: '50%' }, 500); });  

CSS： –

 .slideBox { position: absolute; width: 450px; height: 200px; line-height: 300px; font-size: 50px; text-align: center; border: 2px solid black; left: 70%; top: 300px; margin-left: -25%; } #slideBox1 { background-color: blue; } #slideBox2 { background-color: yellow; left: 150%; } #slideBox3 { background-color: red; left: 150%; } 

有css，它工作正常，如果我设置单击div .slideBox {}它滑动但不与上面发布的脚本。

Answer 1

我建议均匀地定位所有表单元素，这样您每次点击只需要移动一次。 这使得您的jQuery代码更加简单。 使用百分比来定位元素也会使事情变得棘手。 您可以考虑使用固定像素定位。 那时，你的JS就像这样简单

 $('.slideNext').click(function() { $('.slideBox').animate({ left: '-=150px' }, 500); });​ 

有关实现的示例，请参阅此jsFiddle： http ： //jsfiddle.net/5aFHk/

我决定使用锚标签而不是按钮，但要么都应该正常工作。

Answer 2

我不是jQuery专家，但我知道你会想要在document.ready中包装jQuery函数，如下所示：

Answer 3

你可以发布CSS吗？ 只有当div相对或绝对定位时，Left才有效。 如果您还没有，请在您的css中设置：

 .slideBox{position:absolute} 

根据您的布局，您可能还需要设置：

 #introFormHome{position:relative} 

就像PaparazzoKid说的那样，你也应该将你的jQuery包装成：

 $(document).ready(function(){ //jQuery code in here })