0

我有这段代码，它在 mouseenter 上将一些图标淡化为不透明度 1.0，在 mouseleave 上淡化为 0.3。它工作得很好，除了我在不同的响应视图中将这些图标设置为不透明度 0.13，但下面的代码仍然将它们淡化回 0.3 而不是鼠标移出时的 0.13，这不是我想要的。

$(".social-holder img").on("hover", function(e) {
    if(e.type == "mouseenter") {
        $(this).fadeTo('fast', 1.0);
    }
    else if (e.type == "mouseleave") {
        $(this).fadeTo('fast', 0.3);
    }
});

我尝试了下面的代码，但我不明白为什么它不起作用。它在 mouseleave 上将图标留在 1.0

$(".social-holder img").on("hover", function(e) {
    var currentOpacity = $(this).css('opacity');
    if(e.type == "mouseenter") {
        $(this).fadeTo('fast', 1.0);
    }
    else if (e.type == "mouseleave") {
        $(this).fadeTo('fast', currentOpacity);
    }
});

顺便说一句，当我使用控制台检查时，var currentOpacity 似乎工作正常，但它似乎没有进入 else if 语句。也许我对范围或其他东西有一些误解。

4

1 回答 1

1

您的代码不起作用，因为每次调用处理程序时，都会currentOpacity发生变化。因此，在鼠标离开时，将执行以下代码：

 var currentOpacity = $(this).css('opacity');
 $(this).fadeTo('fast', currentOpacity);

这是一种不做任何事情的精巧方式:-)

请改用此代码：

if(e.type == "mouseenter") {
    // Either preserve the saved value or get current opacity
    var origOpacity = $(this).data('origOpacity') || $(this).css('opacity');
    $(this).fadeTo('fast', 1.0).data('origOpacity', origOpacity);
}
else if (e.type == "mouseleave") {
    var origOpacity = $(this).data('origOpacity');
    $(this).fadeTo('fast', origOpacity, function(){ $(this).removeAttr('style'); });
}

这将在元素的数据映射中保存输入时的不透明度并从那里取回。

于 2013-01-23T17:24:54.670 回答