Question

我有以下代码，我在悬停状态下用于fadeIn和fadeOut。

$(function(){
    $("#bottomIco ul li a").hover(function(){
        $(this).children("#gray").fadeOut("100",function(){
            $(this).parent().children("#actual").fadeIn("100");
        });
    },function(){
        $(this).children("#actual").fadeOut("100",function(){
            $(this).parent().children("#gray").fadeIn("100");
        });
    });
});

它有效，但当我在#gray中盘旋时，会出现空白，然后#actual div来了。

我需要让它顺利进行，即我悬停时不需要空白。

Answer 1

你得到“空白”的原因是因为#actual在#gray淡出的回调中逐渐消失。这意味着您正在等待#gray完全淡出，然后淡出#actual。

尝试同时进行淡出和淡化。

$(this).children("#gray").fadeOut(100);
$(this).children("#actual").fadeIn(100);

由于两个淡入淡出都是异步的，因此它们可能会在大约相同的时间执行，可能是毫秒或两个延迟。

这样做时唯一需要考虑的是它们会同时渲染到屏幕上，所以如果你想要一个渐变过渡，你需要研究定位。

#bottomIco ul li a { position: relative; }

    #bottomIco ul li a.fade #gray,
    #bottomIco ul li a.fade #actual {
        position: absolute;
        top: 0;
        left: 0;
    }

然后，只要在淡入淡出之间时应用并移除fade类。

var $this = $(this);
$this.addClass("fade");
$this.children("#gray").fadeOut(100);
$this.children("#actual").fadeIn(100, function() {
    $this.removeClass("fade");
});

Answer 2

我认为使用CSS3将是一个更优雅的解决方案。你可以发一个jsfiddle所以我可以把它放在一起吗？

JQuery fadeIn fadeOut顺利发行

2 个答案: