2

jQueryでアニメーション化して画像を上下させようとしています。

次のように動作する必要があります。

ページが読み込まれると、画像の 50% が表示されます。誰かが画像をクリックすると、ページの div がアニメーション化されます。ユーザーがもう一度クリックすると、ページの下に戻ります。

html

 <div id="slidebottom" class="slide">
     <div class="inner"><img src="images/sze.jpg" alt="" class="try" /></div>
 </div>

jQuery

$(document).ready(function() {
    $('.try').click(function() {
        $(".inner").animate({
            top: '-=100px'
        }, 2000);
    });
});

2 回クリックした後にアニメーションを元に戻すにはどうすればよいですか? クリックするたびにコンテナが上に移動する瞬間。

4

3 に答える 3

5

.toggle()2 つの関数を取り、クリック時にそれぞれの関数を交互に実行する方法を試すことができます。

$(document).ready(function(){
  $('.try').toggle(function() {
    $(".inner").animate({top: '-=100px'}, 2000);
  }, function() {
    $(".inner").animate({top: '+=100px'}, 2000);
  });
});

ただし、個人的にはクラスと CSS3 Transitions を使用します。

于 2012-07-18T08:31:20.993 に答える
2

この例を試してください。また、topcss プロパティを使用するには、またはposition: relatve;div .position: absolute.inner

 var clicked = false
 $('.try').click(function () {
     if (clicked == true) {
         $(".inner").animate({
             top: '0px'
         }, 2000);
         clicked = false;
     } else {
         $(".inner").animate({
             top: '-100px'
         }, 2000);
         clicked = true;
     }
 });​
于 2012-07-18T08:37:11.570 に答える