Jquery 如何在单击按钮时滑动Div

我正在尝试制作一个滑动表单按钮，我不熟悉JQuery，请建议

Html:-

<div id="introFormHome">
<form action="" method="">
    <div id="slideBox1" class="slideBox">
          Conferm Location <input type="text" value="" />
          <button class="slideNext">Continue</button>
    </div>
    <div id="slideBox2" class="slideBox">
          Area <input type="text" value="" />
          <button class="slideNext">Continue</button>
    </div>
    <div id="slideBox3" class="slideBox">
          Email Address <input type="text" value="" />
          <button class="slideNext">Continue</button>
    </div>
</form>

<script type="text/javascript" >
$('.slideNext').click(function() {
   $('.slideBox').animate({
        left: '-50%'
    }, 500, function() {
        $(this).css('left', '150%');
        $(this).appendTo('#introFormHome');
    });
    $(this).next().animate({
        left: '50%'
    }, 500);
});
</script>

.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{}它可以滑动，但不使用上面发布的脚本。

我不是jQuery专家，但我知道您将希望在document.ready中包装该jQuery函数，如下所示：

<script type="text/javascript" >
$(document).ready(function() {

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

});
</script>

$（文档）.ready（函数（）{
$（'.slideNext'）。单击（函数（）{
$（'.slideBox'）。设置动画({
左：“-50%”
}，500，函数（）{
$（this.css（'left'，'150%'）；
$（this.appendTo（“#introFormHome”）；
});
$（this）.next（）.animate({
左：“50%”
}, 500);
});
});

我不是jQuery专家，但我知道您需要将jQuery函数包装到document.ready中，如下所示：

<script type="text/javascript" >
$(document).ready(function() {

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

});
</script>

$（文档）.ready（函数（）{
$（'.slideNext'）。单击（函数（）{
$（'.slideBox'）。设置动画({
左：“-50%”
}，500，函数（）{
$（this.css（'left'，'150%'）；
$（this.appendTo（“#introFormHome”）；
});
$（this）.next（）.animate({
左：“50%”
}, 500);
});
});

你能发布CSS吗？只有当div处于相对或绝对位置时，Left才会起作用。如果您还没有，请在css中设置：

.slideBox{position:absolute}

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

#introFormHome{position:relative}

正如狗仔队所说，您还应该将jQuery包装成：

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

---

你能发布CSS吗？只有当div处于相对或绝对位置时，Left才会起作用。如果您还没有，请在css中设置：

.slideBox{position:absolute}

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

#introFormHome{position:relative}

正如狗仔队所说，您还应该将jQuery包装成：

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

---

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

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

有关实现示例，请参见此JSFIDLE：

---

我决定使用锚定标记而不是按钮，但两者都可以正常工作。

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

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

有关实现示例，请参见此JSFIDLE：

---

我决定使用锚定标签而不是按钮，但两者都可以正常工作。

您的尝试有什么问题？你有什么错误吗？它没有滑动。。。。如果我们将整个div设置为滑动，但不单击按钮…：（如果您的div没有单击就可以滑动，但没有单击就可以滑动，那么我认为@PapazzoKid有答案。请使用document.ready。您的尝试有什么问题吗？您有任何错误吗？它没有滑动……如果我们将整个div设置为滑动，而不是单击按钮……：（如果你的div没有点击就可以滑动，但是没有点击就可以滑动，那么我认为@papazzokid就有答案了。使用document.ready。