jQuery:淡出当前不透明度

你可以试着做:

$('#element').animate({opacity:0});

…而不是淡出()。

我不确定您当前的代码是什么样子,但是您需要使用jQuery.animate()函数:

http://api.jquery.com/animate/

下面是一个例子:

$('#object').mouseover(function() {
  $(this).animate({
    opacity: 1,
  }, 1000, function() {
    //completion code?
  });
});

$('#object').mouseout(function() {
  $(this).animate({
    opacity: 0,
  }, 1000, function() {
    //completion code??
  });
});

使用 jQuery's .fadeTo() method 这样可以设置目标不透明度。

$('selector').fadeTo('slow', 1);
$('selector').fadeTo('slow', 0);

第一个参数是速度,第二个参数是不透明度。

如果你在使用 .hover() 你可以这样做:

例子: http://jsfiddle.net/ecUdS/

$('selector').hover(function( evt ) {
    $(this).stop().fadeTo('slow', evt.type === 'mouseenter' );
});

这个 uses .stop() 如果动画正在运行,则停止该动画。

那么 because .hover() 两个都会开火 mouseenter 和 mouseleave ,我添加了一个测试,其中 穆塞特 ,它将发送 true (相当于 1 ). 否则它会 false 或 0 .

我以前也有过同样的问题。您不能真正使用jQuery的animate函数,因为它总是希望完成动画。所以我为它写了自己的函数。。希望这能有所帮助(我也没想到有一天会和大家分享,所以这篇文章是为了适合我的使用方式而写的):

//Custom fade effects.
//Similar to jQuery's fadeIn & fadeOut
//Except that it doesn't queue animations, and can cut the animation short at anytime
//Highly useful for quickly hovering over elements and desiring the fade effects to be cut on hover in/out.

function fade(elem, interval) 
{
    if(!(elem instanceof $)) {
        elem = $(elem);
    }

    if(elem.is(':not(:visible)')) {
        elem.css('opacity', '0').show();
    }

    elem.css('opacity', function() { 
            var current = $(this).data('fadeLevel') || 0;

            //normalize - accounts for tiny descrepancies in parsing
            if(current < 0) { current = 0; } 
            if(current > 1) { current = 1; } 

            $(this).data('fadeLevel', current + interval)

            return $(this).data('fadeLevel');
        });

    if(elem.data('fadeLevel') < 0 || elem.data('fadeLevel') > 1 ) {
        clearTimeout(elem.data('fadeTimer'));
    }
}

function fadeIn(elem) { fadeTo(elem, 0.04, 0); }
function fadeOut(elem) { fadeTo(elem, -0.04, 1); }
function fadeTo(elem, interval, level) {
    if(!$(elem).data('itemOpen')) {
        clearTimeout($(elem).data('fadeTimer'));
        $(elem).data('fadeLevel', level).data('fadeTimer', setInterval(function() { fade(elem, interval) }, 30));
    }
}

实例

http://jsfiddle.net/3AxHb/