Question

我在mouseOver上将对象从0％淡化为100％，在mouseOut上淡出0％。

当我快速mouseIn和mouseOut时，效果会“跳跃”，因为mouseOut从100％逐渐消失 - 因为我快速mouseIn并且mouseOut，淡入不会一直消失到100％。也许它只会消退到25％或10％。

我的问题是：如何才能使淡出效果仅从特定百分比中消失？

如果fadeIn只有20，则fadeOut应该是fadeOut从20开始。

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'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，我添加了一个测试，如果它是mouseenter，它会发送true（这等于1）。否则，它会发送false或0。

Answer 4

我曾经有同样的问题。你不能真正使用jQuery的动画功能，因为它总是想要完成动画。所以我为它编写了我自己的函数..希望这有帮助（我也不希望有一天能分享这个，所以它已被写成适合我的使用方式）：

//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/

jQuery：淡出当前的不透明度

4 个答案: