javascript - jQuery-ui stop() 动画导致样式粘住

Question

我有一个包含 div 的无序列表。当一个悬停在上面时，其他应用了一个类，使它们略微淡出。

<ul class="three_up tiles">
    <li id="ember283" class="ember-view questioncontainer"></li>
    <li id="ember293" class="ember-view questioncontainer"></li>
    <li id="ember298" class="ember-view questioncontainer"></li>
    <li id="ember299" class="ember-view questioncontainer"></li>
    <li id="ember300" class="ember-view questioncontainer"></li>
    <li id="ember301" class="ember-view questioncontainer"></li>
    <li id="ember302" class="ember-view questioncontainer"></li>
</ul>

出现的问题是，当用户快速浏览它们时，有些人会在某个时候坚持使用它们的样式。

这里有一个 fiddle :http://jsfiddle.net/QusWU/1/

我的解决方案应该是什么？

Answer 1

问题是，当您使用带有动画效果的 .addClass 版本时，它不会在动画完成之前将类添加到元素中。如果未添加该类，则调用 removeClass 不会执行任何操作。

正如@ArunPJohny 指出的那样，您可以使用.stop(true, true) 将动画跳到最后，这样类就会被添加。但是，这有其自身的问题，因为您不想要视觉效果。

也许您不应该使用类而只是设置不透明度的动画。这样动画中途停止倒退就好了。

var $containers = $(".questioncontainer");

$containers.mouseenter(function () {
    var $container = $(this);
    $container.stop().animate({ opacity: 1.0 }, 500);
    $container.siblings().stop().animate({ opacity: 0.2 }, 500);
});

$containers.mouseleave(function () {
    $containers.stop().animate({ opacity: 1.0 }, 500);
});

jsfiddle