3

次のようなアニメーション効果を作成しようとしています。

// JavaScript Document
$(document).ready(function () {
    $('.lovebtn').click(function () {
        $('.love').animate({
            height: '672px'
        }, 1000, function () {
            $('.lovetxt').css("display", "block");
            $(".lovebtn .button").attr("src", "images/btn_love_close.gif");

        });

    });


    // Lust
    $('.lustbtn').click(function () {
        $('.lust').animate({
            height: '672px'
        }, 1000, function () {
            $('.lusttxt').css("display", "block");
            $(".lustbtn .button").attr("src", "images/btn_lust_close.gif");

        });

    });


    //luxuary
    // Lust
    $('.luxurybtn').click(function () {
        $('.maskbg').css("display", "block");
        $('.luxury').animate({
            height: '1056px'
        }, 1000, function () {
            $('.luxurytxt').css("display", "block");
            $(".luxurybtn .button").attr("src", "images/btn_luxury_close.gif");

        });

    });
});

http://uniquedl.com/3closets/index.html

あなたがabloveページに行き、愛の欲望と贅沢のどちらかの3つのボタンをクリックするとき。一連の効果が得られます。同じボタンをクリックすると、効果を元に戻したくありません。

どのように私はそれを行うことができますか？

4

3 に答える 3

6

もちろん、他の高さとCSSセレクターがほとんど同じである愛ボタンについてのみ表示します

$('.lovebtn').click(
     $('.love').toggle(  
         function() {  
             $('.love').animate({  
                 height: '672px'   
             }, 1000, function () {  
                 $('.lovetxt').css("display", "block");  
                 $(".lovebtn .button").attr("src", "images/btn_love_close.gif");  
             }    
        },    
        function() {    
            $('.love').animate({    
                height: '480px'    
            }, 1000, function () {    
                $('.lovetxt').css("display", "none");  
                $(".lovebtn .button").attr("src", "images/btn_love_open.gif");  
            }    
        }  
    );  
);

申し訳ありませんが、コードを正しいレイアウトに配置するのに問題があります:(ここで確認できますhttp://jsfiddle.net/dKyku/

基本的に、リンクをクリックすると、コードの2つの部分が切り替わります。1つはセクションを表示し、もう1つはセクションを非表示/元のレイアウトに戻します。

于 2011-02-15T12:44:12.250 に答える
5

このようなクラスを追加してこれを行うこともできます

   $('.lovebtn').click(function (){
   if (!$(this).hasClass('reverse')) {
    hasClickedLove = true;
    $('.love').animate({
        height: '672px'
    }, 1000, function () {
        $('.lovetxt').css("display", "block");
        $(".lovebtn .button").attr("src", "images/btn_love_close.gif");
    });
  $(this).addClass('reverse);

 }//end if
 else if(hasClass('reverse')) {
    $(this).removeClass('reverse);
    //animation code
   }
});
于 2012-11-23T18:14:22.030 に答える
4

次のようにブール値を挿入します。

$('.lovebtn').click(function () {
    if ( !hasClickedcLove) {
        hasClickedLove = true;
        $('.love').animate({
            height: '672px'
        }, 1000, function () {
            $('.lovetxt').css("display", "block");
            $(".lovebtn .button").attr("src", "images/btn_love_close.gif");
        });
    }//end if
    else {
        hasClickedLove = false;
        //animation code
    }
});
于 2011-02-15T12:40:23.537 に答える