0

我有以下代码，用于在悬停状态下淡入和淡出。

$(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 出现。

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

4

2 回答 2

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");
});
于 2012-05-11T04:48:04.533 回答
0

我认为使用 CSS3 将是一个更优雅的解决方案。您可以发布一个 jsfiddle 以便我为您整理吗？

于 2012-05-11T06:16:52.280 回答