1

クリック イベントでリスト アイテム内の div をアニメーション化しようとしていますが、コードが機能しない理由がわかりません。

divへの直接パスを指定すると機能しますが、特定のクラスを使用しないようにスクリプトを保持したいです。

$('#home ul.circles li').click(function() {
    $(this).next('div').animate({opacity: 0.8, top:'0'}, 1500 );
});

HTML

<ul class="circles">
        <li class="c-1"><div class="c-1-active">Text Link</div></li>
        <li class="c-2"></li>
        <li class="c-3"></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

4 に答える 4

1

交換：

$(this).next('div').animate({opacity: 0.8, top:'0'}, 1500 );

と：

$(this).parent().find('div').animate({opacity: 0.8, top:'0'}, 1500 );

または：

$(this).find('div').animate({opacity: 0.8, top:'0'}, 1500 );

何を達成したいかによります。

div は、いずれかの兄弟ではなく、いずれかのli子です。

于 2012-07-04T14:56:24.537 に答える
1

div は li 要素内にあります。.find(..)代わりに使用してください。

于 2012-07-04T14:57:05.897 に答える
0

次のような多くの問題が発生する可能性があります-

  • コードを $(document).ready(fn); 内に保持していません。
  • アニメーション化しようとしている要素 (div) に位置 (相対または絶対) がありません。
  • div の初期不透明度を設定して試すこともできます。

jsfiddle リンクが作成されます。
jsfiddle

于 2012-07-04T15:11:53.720 に答える
0

セレクターで「>」を使用して、li 要素の直接の子を選択できます。これはdivのみを選択します。div 内に別の div がありますか?選択されません:

$('#home ul.circles li').click(function() {
    $(this).find('>div').animate({opacity: 0.2, top:'0'}, 1500 );
});​​​​​​​​​​​
于 2012-07-04T15:17:43.857 に答える