Jquery在鼠标悬停时将图标淡化回鼠标悬停之前的值

Question

我有这段代码，它在 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 语句。也许我对范围或其他东西有一些误解。

Answer 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'); });
}

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