0

这是一个带有一些缩略图的页面:

http://thenozzle.net/games

我想要的是当你将鼠标悬停在一个缩略图上时,其他的会变成黑色(每个拇指后面都有一个黑色的 div)。悬停,他们回来。

问题是当您从一个缩略图转到下一个缩略图时,页面上的所有其他缩略图会很快淡入然后淡出。我怎样才能防止这种情况?有没有更好的方法来做我想要完成的事情?

这是我到目前为止所拥有的:

$('.child-thumb').hover(
    function () {
        $(this).addClass('active').removeClass('inactive');
        $('.inactive').children('img').stop(1,1).fadeTo('fast', .3);
            $('.inactive').children('p').stop(1,1).fadeTo('fast', .3);
    },
    function () {
        $('.inactive').children('img').stop(1,1).fadeTo('fast', 1);
            $('.inactive').children('p').stop(1,1).fadeTo('fast', 1);
        $(this).removeClass('active').addClass('inactive');
    }
);

注意2:另外,如果有任何方法可以简化或压缩我的代码以使其更具语义/更快/更轻,请告诉我。

谢谢!

4

1 回答 1

2

您使用 .stop() 不正确。您在这里可能需要的唯一参数是 [clearqueue] = true (只有当您担心您的用户在 0.3 秒内进行两次切换时才会这样做)

只需将所有站点设置为.stop(true)

例如:

$('.inactive').children('img').stop(true).fadeTo('fast', .3);

jsfiddle

于 2011-11-12T04:01:56.920 回答