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>

我只显示了 2 个带有 class="window" 的 div，但会有很多 div

我知道我的脚本没有我想要的那么好，当我选择一个 div 时，所有其他 div 都是动画的。

4

3 回答 3

1

有很多方法可以得到这个..

使用兄弟姐妹（）

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

使用查找（）

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

使用下一个（）

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

但这里最重要的是$(this)实例（参考）..`

$('.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 回答
1

使用一个实例this

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