JQuery淡入淡出淡出问题

我有下面的代码，我用于淡入淡出和淡出状态悬停状态。JQuery淡入淡出淡出问题

$(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来了。

我需要使它平滑，即当我悬停时不需要空白。

来源

2012-05-11 Pus

如果可能的话，示例标记将有很大帮助 – Dhiraj

然后请提供一个jsfiddle示例和css以及 –

你得到“空白”的原因，是因为你在的回调中淡出#actual的淡出。这意味着您正在等待#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"); 
});

来源

2012-05-11 04:48:04 peirix

谢谢请顺便说一句，它不适合我。 – Pus

@PushparajJoshi什么不工作？你可以说得更详细点吗？ – peirix

我在两张图像之间闪烁。我会告诉你在jsfiddle – Pus

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

来源

2012-05-11 06:16:52

http://jsfiddle.net/yyzr4/2/你可以在这里看到 – Pus

这里是一个CSS唯一的解决方案：http://jsfiddle.net/yyzr4/2/请让我知道如果我已经理解了这个问题！ –

JQuery淡入淡出淡出问题

回答

相关问题