Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In jQuery, can you get the "target" opacity of an element that is fading?

I'd like to somehow get the target opacity (the final value it is being animated to) of an element that is fading.

For example...

$('body').fadeTo(0.4); // 0.4
$('body').fadeIn(); // 1
$('body').fadeOut(); // 0
$('body').animate({ opacity: 0.7 }); // 0.7

Is this doable in jQuery?

Update

For some background, see my answer here on Stack Overflow. I was trying to help out another user on SO and decided to ask this question that related to my answer.

like image 623
alex Avatar asked Jun 03 '10 23:06

alex


People also ask

What is value of opacity parameter in FADE TO () method?

The . fadeTo() method animates the opacity of the matched elements. It is similar to the . fadeIn() method but that method unhides the element and always fades to 100% opacity.

What is Fading in jQuery?

jQuery fadeIn() Method The fadeIn() method gradually changes the opacity, for selected elements, from hidden to visible (fading effect). Note: Hidden elements will not be displayed at all (no longer affects the layout of the page).

What is opacity in jQuery?

jQuery Effect fadeTo() MethodThe fadeTo() method gradually changes the opacity, for selected elements, to a specified opacity (fading effect).


1 Answers

jQuery uses step functions internally, you can overwrite the jQuery.fx.step.opacity function to read the passed jQuery.fx object:

var old = jQuery.fx.step.opacity;

jQuery.fx.step.opacity = function( fx ) {
    console.log(fx.elem);
    console.log(fx.end);

    return old(fx);
};

The opacity step function is called on every step of every opacity animation. You would probably want to filter the above based on fx.elem.

fx.end is the final value of the animation, fx.now is the current value and fx.start is the starting value. fx.unit is the unit of the values (in px, em, %, etc).

like image 77
Brian McKenna Avatar answered Sep 18 '22 21:09

Brian McKenna