jQuery: Fade out from current opacity

I'm fading an object from 0% to 100% on mouseOver, and fade back out to 0% on mouseOut.

When I do a quick mouseIn and mouseOut, the effect "jumps" because mouseOut is fading out from 100% - an开发者_开发百科d because I do a quick mouseIn and mouseOut, the fade in doesn't fade all the way to 100%. Maybe it only fades to 25% or 10%.

My question is: How can I make the fadeout only fading from the specific percentage?

If the fadeIn only gets to 20, the fadeOut should fadeOut from 20.

You could try doing:

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

...instead of fadeOut().

I'm not sure what your current code looks like, but you'll want to use the jQuery .animate() function:

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

Here is an example:

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

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

Use jQuery's .fadeTo() method which lets you set a target opacity.

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

The first argument is the speed, the second is the opacity.

If you're using .hover() you could do it like this:

Example: http://jsfiddle.net/ecUdS/

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

This uses .stop() to stop the animation if it is running.

Then because .hover() will fire for both the mouseenter and mouseleave, I added a test where if it is a mouseenter, it will send true (which will equate to 1). Otherwise it sends false or 0.

I had this same issue once upon a time. You can't really use jQuery's animate functions because it always wants to complete the animation. So I wrote my own function for it.. hope this helps (also I wasn't expecting to share this someday, so it has been written to be suited to how I was using it):

//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));
    }
}

Examples

http://jsfiddle.net/3AxHb/