Question

我在jQuery中的两个不透明度之间出现问题。这是我的代码：

$(document).ready(function() {
    $('#header').mouseover(function() {
        $(this).fadeTo(2000, 1.0);
    }).mouseout(function() {
        $(this).fadeTo(2000, 0.4);
    });
});
<div id="header" style="background: black; height: 100px;width: 100px; opacity: 0.4;"></div>

问题是，当我将鼠标移到#header元素上时，它将从0开始逐渐消失。但我想从0.4到1效果。可以用jQuery做到吗？

编辑：看起来我的Chromium 8有问题。一切正常在firefox中运行。有关如何解决这个早期版本的Chrome的任何建议吗？

EDIT2：包含jQuery Animate Enchanced

后工作正常

Answer 1

$(this).css('opacity', '0.4').fadeTo(2000, 1.0)

完整代码：

$(document).ready(function() {
    $('#header').mouseover(function() {
        $(this).css('opacity', '0.4').fadeTo(2000, 1.0);
    }).mouseout(function() {
        $(this).fadeTo(2000, 0.4);
    });
});

Answer 2

尝试这样

$('#header').mouseover(function() {
        $(this).css('opacity', .4).fadeTo(2000, 1.0)
    }
)
...

DEMO

jQuery淡化两个不透明度

2 个答案: