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を投稿できますか？Left は、div が相対的または絶対的に配置されている場合にのみ機能します。まだ持っていない場合は、css で次のように設定します。

.slideBox{position:absolute}

レイアウトによっては、次の設定も必要になる場合があります。

#introFormHome{position:relative}

PaparazzoKid が言うように、jQuery を次のようにラップする必要もあります。

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

すべてのフォーム要素を均等に配置して、1 回のクリックですべてを移動するだけで済むようにすることをお勧めします。これにより、jQuery コードがはるかに単純になります。パーセンテージを使用して要素を配置すると、さらに複雑になります。代わりに、固定ピクセル配置を使用することを検討してください。その時点で、JS は次のように単純になります。

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

実装の例については、この jsFiddle を参照してください: http://jsfiddle.net/5aFHk/

ボタンの代わりにアンカー タグを使用することにしましたが、どちらでも問題なく動作するはずです。

于 2012-07-22T06:53:10.937 に答える