Question

http://dl.dropbox.com/u/921159/desktopography/index.html

我正在构建壁纸博客并尝试使用jquery来显示/隐藏下载链接（我是新手）。问题是，如果你将鼠标悬停在图像上并让链接淡入，则在它淡出时快速悬停并重新开启......链接将停止在当前处于不透明度的位置。当用户随意地悬停在图像上并且不透明度被卡在0时，它最终会成为一个问题。是什么引起了这个？

Answer 1

动画clearQueue方法中的

.stop()默认为false（see API），但您希望它为true，因为您希望当前动画清除让它启动新的悬停状态动画。按如下方式更改您的代码：

$(function() {
    $('.wallpaper').hover(function() {
        $(this).children('p').stop(true, true).fadeIn(300);   
    }, function() {
        $(this).children('p').stop(true, true).fadeOut(400);
    });
});

Answer 2

这是因为您正在使用stop()^(docs)来暂停动画并将其反转。麻烦的是，下一个淡入淡出函数会记住停止的点，并使用它。

您可以改为使用fadeTo()^(docs)，以便在1和0修复不透明度目标。

$('.wallpaper').hover(function() {
    $(this).children('p').stop().fadeTo(300, 1);   
}, function() {
    $(this).children('p').stop().fadeTo(400 ,0);
});

编辑：使用animate()^(docs)的等价物是：

$('.wallpaper').hover(function() {
    $(this).children('p').stop().animate({opacity:1}, 300);   
}, function() {
    $(this).children('p').stop().animate({opacity:0}, 400);   
});

请注意，这些都不会在最后设置display:none。如果你想要，你需要手动完成。

$('.wallpaper').hover(function() {
    $(this).children('p').show().stop().fadeTo(300, 1);   
}, function() {
    $(this).children('p').stop().fadeTo(400 ,0, function(){$(this).hide()});
})
  .children('p').css('opacity',0);

Answer 3

查看.stop()方法。它旨在解决这些问题。

jquery不透明度与fadein和fadeout的问题

3 个答案: