0

リスト項目をクリックするとアニメーションが発生するコードを以下に示します。

私が問題を抱えているのは、もう一度クリックするとリスト項目がアニメーション効果を逆にすることです。

クリックしたリスト項目を変数に保存しようとしていますが、変数が要素の詳細を保存しないため、これに問題がありますか?

これを行うためのより良い方法があるかもしれませんが、助けやアドバイスは素晴らしいでしょうか?

 <ul class="circles">
     <li class="c-1"><div class="c-1-active">Text Link</div></li>
     <li class="c-2"><div class="c-1-active">Text Link</div></li>
     <li class="c-3"><div class="c-1-active">Text Link</div></li>
  </ul>



$('#home ul.circles li').click(function() {
    alert(testing);
    if(testing > "" || testing == $(this).find('div'))
    {
        testing.animate({opacity: 0, top:'180px'}, 1000 );
    }
        $(this).find('div').animate({opacity: 0.8, top:'0'}, 1000 );
        var testing = $(this).find('div');

});
4

3 に答える 3

3

トグル機能が必要です：

$('#home ul.circles li').toggle(function() {
    $(this).find('div').stop().animate({opacity: 0, top:'180px'}, 1000 );
},function() {
    $(this).find('div').stop().animate({opacity: 0.8, top:'0'}, 1000 )
});

更新:あなたのコメントによると、この解決策はより望ましいはずです:

$('#home ul.circles li').click((function(){
    var prevElement = null;
    return function(){            
        //Hiding previously active element
        prevElement && $(prevElement).stop().animate({opacity: 0, top:'180px'}, 1000);

        var curElement = $(this).find('div').get(0);
        $(curElement).stop().animate({opacity: 0.8, top:'0'}, 1000);
        prevElement = curElement;
    };
})());
于 2012-07-04T19:38:50.733 に答える
2

問題は、変数が呼び出されない理由です。これは、「クリック時」イベントハンドラーのスコープ内で新しい変数を定義するためです。あなたができることは、これです：

この行を追加しますグローバルスコープclosureのような囲み$.ready():

var testing = null;

そして、次の行を置き換えます。

 var testing = $(this).find('div');

これとともに：

 testing = $(this).find('div');

ただし、コメントに記載されているように、クラスを使用して要素に状態を与える必要があります。.toggleClass()などの関数を使用して、状態を簡単に変更できます。

編集

コメントで要求されているように、「アクティブ」状態になるのは1つだけです。これは簡単な解決策です。

JavaScript:

<script>

$(document).ready(function () {

    var circles = $('#home ul.circles li');
    var current = 0;

    circles.click( function(event) {

        var position    = circles.index( $(event.target).parent() );

        if ( current != position ) {

            circles.eq(current).animate( { opacity: 0.5 }, 1000 );  
            current = position;
            circles.eq(current).animate( { opacity: 1 }, 1000 );
        }

        event.preventDefault();

    });

});

</script>

CSS:

<style>

    #home ul.circles > li {
        opacity:        0.5;
    }

    #home ul.circles > li.c-1 {
        opacity:        1.0;
    }

</style>

HTML:

<div id="home">
    <ul class="circles">
        <li class="c-1"><div class="c-1-active">Text Link</div></li>
        <li class="c-2"><div class="c-1-active">Text Link</div></li>
        <li class="c-3"><div class="c-1-active">Text Link</div></li>
    </ul>
</div>
于 2012-07-04T19:39:35.293 に答える
0

1 つの方法は、クラスを追加することです。clicked

これはうまくいくはずです：

$('#home ul.circles li').click(function() {
    alert(testing);
    if($(this).hasClass('clicked')) {
        $(this).find('div').animate({opacity: 0, top:'180px'}, 1000 );
        $(this).removeClass('clicked');
    } else {
        $(this).find('div').animate({opacity: 0.8, top:'0'}, 1000 );
        $('.clicked').removeClass('clicked');
        $(this).addClass('clicked');
    }
});
于 2012-07-04T19:41:27.580 に答える