代码之家  ›  专栏  ›  技术社区  ›  curly_brackets

jQuery:淡出当前不透明度

  •  0
  • curly_brackets  · 技术社区  · 14 年前

    我正在将对象从0%淡入到100% mouseOver ,然后淡出到0% mouseOut .

    当我做一个快速的 mouseIn 鼠标悬停 ,效果“跳跃”是因为 鼠标悬停 正在从100%逐渐消失,因为我做了一个快速的 鼠皮 鼠标悬停 ,淡入不会一直淡入到100%。可能只会褪色到25%或10%。

    我的问题是: 我怎样才能使淡出只从特定的百分比淡出?

    如果 fadeIn 只有20个 fadeOut 应该 淡出 从20岁开始。

    4 回复  |  直到 8 年前
        1
  •  1
  •   Liam Galvin    14 年前

    你可以试着做:

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

    …而不是淡出()。

        2
  •  1
  •   James Thompson    14 年前

    我不确定您当前的代码是什么样子,但是您需要使用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??
      });
    });
    
        3
  •  1
  •   user113716    14 年前

    使用 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 .

        4
  •  0
  •   John Strickler    14 年前

    我以前也有过同样的问题。您不能真正使用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/