jQuery：从当前不透明度淡出

Question

我在 mouseOver 上将对象从 0% 淡入到 100%，并在 mouseOut 上淡出到 0%。

当我快速执行 mouseIn 和 mouseOut 操作时，效果会“跳跃”，因为 mouseOut 从 100% 淡出 - 而且因为我执行了快速操作mouseIn 和 mouseOut，淡入不会一直淡出到 100%。也许它只会褪到 25% 或 10%。

我的问题是： 如何使淡出仅从特定百分比淡出？

如果 fadeIn 仅达到 20，则 fadeOut 应从 20 fadeOut。

Answer 1

你可以尝试这样做：

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

...而不是 fadeOut()。

Answer 2

我不确定您当前的代码是什么样的，但您需要使用 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??
  });
});

Answer 3

使用 jQuery 的 .fadeTo() 方法 可以设置目标不透明度。

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

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

---

如果您使用 .hover() 您可以这样做：

示例： http://jsfiddle.net/ecUdS/

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

这个 使用 .stop( ) 停止动画（如果正在运行）。

然后 因为 .hover() 将为 mouseenter 触发 和 mouseleave，我添加了一个测试，如果它是 mouseenter，它将发送 true （这相当于 >1）。否则，它发送 false 或 0。

Answer 4

我曾经也遇到过同样的问题。你不能真正使用 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/