JQuery淡出淡出平滑问题

我有下面的代码，我用它在悬停状态下进行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");
        });
    });
});

它可以工作，但当我在灰色中徘徊时，会出现空白，然后出现实际的div

我需要使其平滑，即在我悬停时不必出现空白。

您获得“空白”的原因是，在调用

\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;
    }

然后，当您在两个时间段之间淡入时，只需应用并删除

淡入

类即可

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

---

我认为使用CSS3将是一个更优雅的解决方案。你可以发布一个JSFIDLE，这样我就可以为你把它放在一起了吗？

示例标记将帮助你尽可能多地使用JSFIDLE，然后请提供一个JSFIDLE示例和css，如下所示：well@PushparajJoshi什么不起作用？你能说得更具体一点吗？我在两张照片之间眨眼。我将在jsfiddle中向您展示这使我的问题得以解决。非常感谢你们。这里有一个CSS唯一的解决方案：如果我理解了这个问题，请告诉我！