jquery将mouseout上的图标淡化为它在mousenter之前的值

我有这个代码，它将一些图标淡化到mouseenter上的opacity 1.0，并在mouseleave上回到0.3。 它的效果很好，除非我已经在不同的响应视图中将这些图标设置为不透明度0.13，但下面的代码仍然会将它们淡出为0.13而不是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);
    }
});

我试了下面的代码，我不明白为什么它不会工作。 它在鼠标离开时将图标保留为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语句。 也许我对范围或某事有一些误解。

---

您的代码不起作用，因为每次调用处理程序时， 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'); });
}

这样可以在输入元素的数据映射时保存不透明度，并从那里返回。

链接地址: http://www.djcxy.com/p/94889.html

上一篇: Jquery fade icon back on mouseout to the value it had before mousenter

下一篇: Reset Jquery Color Picker Output Styles