Question

大家好我试着创建一个可以为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>

这是divs

<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

我知道我的脚本不能正常工作，当我选择一个div时，所有其他div都是动画的。

Answer 1

使用this

的实例

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

Answer 2

获得这个的很多方法..

使用兄弟姐妹（）

 $(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)实例（参考）..`

$('.theme_window') - ＆gt;这将选择具有类theme_window的所有元素，以便所有元素都被动画化。

使用$(this).next( .theme_window )，现在浏览器知道它只是当前所选元素的下一个元素，其类是theme_window，因此仅为该特定元素设置动画。

Answer 3

使用指向调用该事件的对象的$(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');
        });
    });

使用一个脚本为许多div设置动画（仅为选定的脚本设置动画）

3 个答案: