Question

我正在尝试制作像this这样的滑动表单按钮，我不熟悉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>

Jquery： -

<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>

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专家，但我知道你会想在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>

Answer 2

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

.slideBox{position:absolute}

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

#introFormHome{position:relative}

就像PaparazzoKid所说，你也应该把你的jQuery包装成：

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

Answer 3

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

一样简单

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

请参阅此jsFiddle以获取实施示例：http://jsfiddle.net/5aFHk/

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

如何滑动Div按钮单击

3 个答案: