PDA

View Full Version : Halting and reversing an animation Fx



stever
10 Sep 2009, 9:17 AM
I'm trying to do a few thing based on hover, but the animation code seems to not be up to my needs. Or, more likely -- user error. ;) What I want is pretty simple -- start an animation on hover, and reverse it when the hover ends. That works fine....

Unless the user moves the mouse out before the animation is complete. In this case, the animation accelerates to the end and reverses from there. How can I get it to just stop without moving it into the final position? I have the same sort of problem with fadeIn/fadeOut...

It seems like such a simple thing, so I need some help seeing the obvious... Thanks!


<html>
<body>
<div id="bg" style="height:500px;background-color:yellow">
<div id="test" style="height:500px;background-color:red;visibility:hidden">&nbsp;</div>
</div>
<script src="adapter/ext/ext-base.js"></script>
<script src="ext-all-debug.js"></script>
<script>
Ext.get("bg").hover(
function(item){
Ext.get("test").slideIn("t",{duration:5})
},
function(item){
Ext.get("test").slideOut("t",{stopFx:true,duration:5})
}
)
</script>
</body>
</html>


It would be nice is I could do something like this:


if (Ext.get("test").hasActiveFx())
Ext.get("test").reverseFx();
else
Ext.get("test").slideOut("t",{duration:5})

Or perhaps a hint to use the current position (and fxwrap)) from an ongoing Fx, perhaps by something like "haltFx" instead of "stopFx":


Ext.get("test").slideOut("t",{haltFx:true,duration:5})

(This is a repost of this thread (http://www.extjs.com/forum/showthread.php?t=79794)that doesn't seem to be going anywhere)

Animal
10 Sep 2009, 9:41 AM
You might have to use Ext.lib.Anim.

slideOut slides out slides out from the fully slid in position, so as you can see it will "snap to" the slid in position when that slideOut effect starts.

slideOut needs enhancing to allow a from property which is the pixel offset from whichever side you are sliding out from which to start. SO this would be a negative value if you want to start from a half-way position.

You'll have to play with it, but to get started experiment with running this/



Ext.lib.Anim.run(Ext.getDom("test"), {
top: {
from: -250,
to:-500
}
},5, null, function(){
// stuff to do when finished...
});


It should slide the test div upwards. Of course the "bg" needs to be position:relative, and "test" needs to be position:absolute.

kavih7
10 Sep 2009, 1:10 PM
Stever,

Let me know if Animal's solution doesn't work for you. I had a need for the exact support you are referring to and wrote Ext overrides/extensions to accomplish it, which I can post for you. Animal's will be less code to use, but if you'd like to try mine, let me know.

-Kavih

stever
10 Sep 2009, 1:33 PM
Stever,

Let me know if Animal's solution doesn't work for you. I had a need for the exact support you are referring to and wrote Ext overrides/extensions to accomplish it, which I can post for you. Animal's will be less code to use, but if you'd like to try mine, let me know.

-Kavih

Yes, please! I was trying to avoid digging into the base Anim code. I did notice why border layout can do strange things to htmleditors or flash in things other than the center panel, however, and thought of a way to fix it should I have the time... Anyhow, I have some other fixes and overrides to share if you want... :)