0

こんにちは皆さん、div をアニメーション化できるスクリプトを作成しようとしています。問題は、このスクリプトを多くの div で使用し、選択した div をアニメーション化することです。

ここにjqueryスクリプトがあります 

    $(document).ready(function(){

        $('.window_content').mouseleave(function() {
            $('.theme_window').animate({'right': '+=297px'},'fast');
        });
        $('.theme_window').mouseover(function() {
            $('.theme_window').animate({'right': '-=297px'},'fast');
        });
    });

</script>

ここにdivがあります

<div class="window">
    <div class="window_content">
        Content
    </div>
    <div class="theme_window">
        Sport
    </div>
</div>
<div class="window">
    <div class="window_content">
    Content
    </div>
    <div class="theme_window" style="background-color:#1372BF">
       Music
    </div>
</div>

class="window" で 2 つの div のみを表示しましたが、多くの div が表示されます

1 つの div を選択すると、他のすべての div がアニメーション化されます。

4

3 に答える 3

1

のインスタンスを使用するthis

$(this).next('.theme_window').animate({'right': '+=297px'},'fast');
于 2013-07-15T19:07:41.090 に答える
1

これを取得する多くの方法..

兄弟 () の使用

 $(this).siblings('.theme_window').animate({'right': '+=297px'},'fast');

find() の使用

$(this).parent().find('.theme_window').animate({'right': '+=297px'},'fast');

next() の使用

$(this).next('.theme_window').animate({'right': '+=297px'},'fast');

しかし、ここで最も重要なのは$(this)instance(reference)..` です。

$('.theme_window')->これにより、クラスtheme_windowを持つすべての要素が選択されるため、すべての要素がアニメーション化されました..

$(this).next(.theme_windowを)使用すると、現在選択されている要素の次の要素であり、そのクラスが theme_window であることをブラウザーが認識し、その特定の要素のみをアニメーション化します。

于 2013-07-15T19:08:28.097 に答える
1

$(this)そのイベントを呼び出すオブジェクトを指すオブジェクトを使用する

$(document).ready(function(){

        $('.window_content').mouseleave(function() {
            $(this).siblings(".theme_window").animate({'right': '+=297px'},'fast');
        });
        $('.theme_window').mouseover(function() {
            $(this).animate({'right': '-=297px'},'fast');
        });
    });
于 2013-07-15T19:08:32.357 に答える