Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

question on jQuery hide() and alpha tweening

Recommended Posts


An element was hidden with jQuery's hide() method and then later it is tweened in using fromTo (0 to 1) using autoAlpha or alpha.


Nagging Issue:

Since alpha tweening is so common along with jQuery hiding/showing various elements, it would be ideal for the tweening logic to 'catch' the fact that a given element is hidden in the fashion that jQuery hide() produces across all browsers, thus alleviating a line or two of code to show/hide before and after the tween.


In addition, sometimes there are flickers/glitches with the start of a tween if the jQuery show() is called just prior to the tween that animates from alpha=0 to alpha>0 value.


Is this possible to overcome with other tween parameter options or would this be a feature request?

  • Incorporate auto-checking for hidden elements and adjust them to be 'shown' before tween starts and then adjust them back to 'hidden' at the end of the tween?


<meta charset="utf-8">
<title>jQuery hide with Tweening Alpha Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="TweenMax.min.js"></script>
<div id="box" style="position:absolute; width:400px; height:300px; overflow:hidden; background-color:#666666;"></div>
$(document).ready(function(e) {
setTimeout(someDelayedTween, 1000);
function someDelayedTween(){
// uncomment this line below to unhide prior to tween
// $('#box').css('display', 'block');

// calling jQuery show() periodically causes flicker/glitches at start of tween

// try to tween fromTo with alpha
TweenMax.fromTo($('#box'), 1, {css:{alpha:0}}, {css:{alpha:1}});

// try to tween fromTo with autoAlpha
// TweenMax.fromTo($('#box'), 1, {css:{autoAlpha:0}}, {css:{autoAlpha:1}});	

// would be nice if the tween itself handled the hidden part behind the scenes

Link to comment
Share on other sites

You should just be able to change display using the css plugin

TweenMax.fromTo($('#box'), 1, {css:{alpha:0,display:'block'}}, {css:{alpha:1}});
// or
TweenMax.fromTo($('#box'), 1, {css:{alpha:0,display:''}}, {css:{alpha:1}});

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.