PDA

View Full Version : Cancelling a fadeIn?



onlinesaratoga
20 Jun 2007, 5:58 PM
How would I cancel a fade in? I have a menu and when they mouseover each item, I want the following:

1. The DIV empties (hides)
2. The new content is placed inside
3. The DIV fades in over 3 seconds

I have each element calling this javascript function called onMouseOver in each menu element:

function replaceContent(t,c) {
if (curPage != t) {
Ext.get('mainContent').setOpacity(0);
document.getElementById('mainContent').innerHTML = c;
Ext.get('mainContent').fadeIn({duration:3});
curPage = t;
}
}

The curPage test makes sure that rolling over the current content won't reload it. However, I have the following problem: when I roll over a second element before the first fadeIn is complete, the content gets replaced before during that current fadeIn, then the fadeIn is called again after the first is complete. The problem compounds over time, so mousing over 10 elements in succession makes you wait through 10 fadeIns.

So my questions are:

1. How would I "cancel" the previous fadeIn call when this function is called again?
2. I found insertHtml command in Ext, but couldn't find a replacement for innerHTML (to replace the contents of the DIV in totality). Am I missing something there?

Thanks for any help!

onlinesaratoga
23 Jun 2007, 6:21 PM
Hey all. Any thoughts on cancelling an action (fadeIn)? It must be simple I would think!

Thanks for any help you can give!

evant
23 Jun 2007, 6:22 PM
Try: http://extjs.com/deploy/ext/docs/output/Ext.Fx.html#stopFx

onlinesaratoga
23 Jun 2007, 7:15 PM
Thanks evant. Boy, that looks like exactly it. However it didn't seem to work. I upped the fade in to 6 seconds with the following:

Ext.get('mainContent').fadeIn({duration:6, callback: allDone});

I then called each of the following:

Ext.stopFx;
Ext.get('mainContent').stopFx;

while the fadeIn is in process, but the fadeIn continues through to the end.

Am I calling it wrong or something?

evant
23 Jun 2007, 7:19 PM
You should be calling stopFx() on the element.



Ext.get('mainContent').stopFx();


You had the () left out, not sure if that was just a typo.

evant
23 Jun 2007, 7:25 PM
Here's an example:



<script type="text/javascript">
Ext.onReady(function()
{
Ext.get('myFade').setOpacity(0);
Ext.get('myFade').fadeIn(
{
duration: 30
}
);
Ext.get('myButton').on('click', function()
{
Ext.get('myFade').stopFx();
}
);
}
);
</script>
<body>
<div id="myFade">text</div>
<input type="button" id="myButton" value="stop" />
</body>

onlinesaratoga
23 Jun 2007, 7:44 PM
Perfect. Worked. Thank you! I hadn't actually found the Fx documentation - some neat effects in there! Big help evant - I appreciate it.