0

当我将鼠标悬停在一个淡入淡出到另一个 img 的 img 上并且滚动得太快时，fadeOut 卡住并且淡入淡出。正如我在其他回复中看到的那样，我已经尝试了 .stop() ，但仍然无法正常工作。还有什么可以代替 .stop() 的吗？

<div class="grid big-square">
  <a href="#"><img id="image2" src="img/fade/creo.png">
  <img id="image1" src="img/creo.jpg"></a>
</div>

<script>
$("#image1").mouseenter(function () {
    $(this).stop(true, true).fadeOut(1000);
});

$("#image2").mouseleave(function () {
    $("#image1").stop(true, true).fadeIn(500);
});
</script>
4

3 回答 3

1

我似乎记得在创建这个网站时遇到了类似的问题。

解决方案是结合使用.hover()并.stop()确保一次只运行一个动画，我认为你有。还要确保鼠标悬停的图像位于另一张图像的顶部，然后将其淡入淡出。淡出的图像被“卡住”，因为在某些不透明度下，.mouseleave()停止发射并.mouseenter()开始在另一张图像上发射。

就像是：

$$ = $("#image1");
$$.hover(function () {
    $$.stop().animate({
        opacity: 0
    }, 1000);
}, function () {
    $$.stop().animate({
        opacity: 1
    }, 1000);
});

#image1必须高于#image2此才能正常工作，#image1淡出以“显示”#image2其背后。代码使用.animate()而不是.fadeIn()和.fadeOut()但效果是一样的。

Edit-在淡出动画结束后淡入另一个 div 使用 animate 函数的完整回调。

就像是：

$$ = $("#image1");
$$.hover(function () {
    $$.stop().animate({
        opacity: 0
    }, 1000);
}, function () {
    $$.stop().animate({
        opacity: 1
    }, 1000, function() {
        $("#finalDiv").animate({ opacity: 1, 500 });
    });
});

#finalDiv需要<img />s在您的 html 中的 2 之后才能显示在它们上方。

于 2013-11-11T01:40:17.957 回答
0

我不确定您是如何尝试完成此任务的，但我确实知道应该如何完成。试试这个http://jsfiddle.net/xy5dj/

确保在同一个元素（最好是包装元素）上监听这两个事件。请注意，fadeOut 实际上会从呈现的内容中删除元素（显示：无），以确保不会在该元素上触发鼠标事件。

旁注：我曾经使用过的一个肮脏的技巧（如果你必须这样做，那么你做错了什么）是使用动画函数的回调能力在动画后清除元素的样式，即

$('el').animate({opacity:0}, 500, function(){$(this).attr('style', '')});
于 2013-11-11T01:40:41.663 回答
0

fiddle

您应该使用以下形式的动画/过渡：

.fadeTo( duration, opacity, complete )

complete回调函数在哪里。

于 2013-11-11T02:00:22.237 回答