Question

我觉得我应该找到这个答案，而且我发现了一些很接近的答案。（即jquery fadeIn does not reach full opacity on doubleclick?）

然而，我的问题很古怪，有点不同，我的JQuery已经添加了'.stop'。我的FadeIns的不透明度是不一致的，尽管事实上每个fadeIn div的编码方式完全相同。此外，不一致是不一致的！它并不总是相同的FadeIn不会达到完全不透明度，有时隐藏的div根本不会淡入，有时则会消失。

好的，所以我有一个带有一堆照片的页面，每个照片在悬停时理论上会在下面的文本div中消失，然后当你继续下一张照片或者当你mouseout离开TEXT div，而不是pic div（感谢这个答案：jQuery onmouseover + onmouseout / hover on two different divs）。

请看这里工作（不工作！）示例：http://www.umbc.edu/facultydiversity/index5.html

这是我的JQuery：

$(function() {
$('#youngtxt').hide();

$('#young, #youngtxt').hover(function() {
$('#youngtxt').stop().FadeIn();
}, function(){
$('#youngtxt').stop().FadeOut();

 });
});

我现在通过更改为show / hide而不是fadein / fadeout“解决”了这个问题，但我想知道为什么FadeIn不起作用。

如果我需要提供有关此问题的更多信息，请与我们联系！

谢谢！

Answer 1

将stop（）的选项设置为true，fadeIn / Out不以大写字母F开头。

$('#youngtxt').hide();

$('#young, #youngtxt').hover(function() {
    $('#youngtxt').stop(true, true).fadeIn();
}, function(){
    $('#youngtxt').stop(true, true).fadeOut();
});

FIDDLE

Answer 2

当您在stop()和fadeIn()上调用fadeOut()动画中期时，仍会看到一小部分不透明度。

.stop(true,true)会起作用，但会让它“跳到最后”导致动画不稳定。

如果平滑动画很重要，请考虑使用animate()代替fadeIn() fadeOut()

Answer 3

我会查看：http://www.2meter3.de/code/hoverFlow/

用于处理动画队列和悬停效果的绝佳插件。

JQuery Div FadeIn / FadeOut间歇性地和不一致地工作

3 个答案: