Jump to content
GreenSock

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

question on jQuery hide() and alpha tweening

Recommended Posts

Scenario:

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?

Example:

<!DOCTYPE HTML>
<html>
<head>
<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>
</head>
<body>
<div id="box" style="position:absolute; width:400px; height:300px; overflow:hidden; background-color:#666666;"></div>
<script>
$(document).ready(function(e) {
$('#box').hide();
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
//$('#box').show();

// 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
}
</script>
</body>
</html>

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.
×