0

我正在尝试制作这样的滑动表单按钮，我对 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{} 它可以正常工作，但不能使用上面发布的脚本。

4

3 回答 3

3

我不是 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>
于 2012-07-22T06:48:17.397 回答
1

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

.slideBox{position:absolute}

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

#introFormHome{position:relative}

就像 PaparazzoKid 所说，您还应该将 jQuery 包装在：

$(document).ready(function(){
       //jQuery code in here
})
于 2012-07-22T06:50:53.687 回答
-1

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

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

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

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

于 2012-07-22T06:53:10.937 回答