View Full Version : [SOLVED] Toolbar fadeIn/fadeOut animation on mouseover/mouseout problem

21 Feb 2008, 1:46 AM

I have an Ext.Toolbar object with buttons and I just want to make it semi-transparent (fadeOut) on mouseout whereas I want to reverse back to opaque (fadeIn) on mouseover. I am using the following code and I have used also useDisplay making all possible combinations (using both modes VISIBILITY or DISPLAY)

toolbar.getEl().on('mouseover', function(e){
toolbar.getEl().fadeIn({ duration: .5});

toolbar.getEl().on('mouseout', function(e){
toolbar.getEl().fadeOut({ endOpacity: .5, duration: .5, });

1) The problem is that onmouse out Fx animation does not work as desired because the toolbar just completely disappears and I have to use show() in order to make it visible again. Am I doing anything wrong? Do u have any suggestions? This behaviour is the same in both IE and FF so probably the fault is mine :-?

2) What is the desired method in order to apply both events not only on the toolbar div but also on toolbar buttons? The problem is that the above script would fire an undesired mouseout event when mouse hovers above buttons? I am not really efficient so far with Ext.query() or Ext.select().

So, how can I apply the same effect on toolbar buttons?


I finally got it to work using the following code

var els = Ext.select('.x-toolbar, .x-btn');
els.shift({ opacity: .5 });
tb.runner = new Ext.util.TaskRunner();
tb.isTransparent = true;

var taskMakeTransparent = {
run: function(){
els.shift({ opacity: .70 });
tb.isTransparent = true;
try {
} catch (err){}
interval: 500

els.on('mouseover', function(e){
if (tb.isTransparent) {
els.shift({ opacity: 1 });
tb.isTransparent = false;
els.on('mouseout', function(e){
if (!tb.isTransparent) {

In the above snippet I am using shift instead of fadeIn/fadeOut method which behaves as desired.
I am also using Ext.util.TaskRunner in order to perform fadeOut. This way I can stop-cancel mouseout effect of x-toolbar when a button on mouse over has been fired. I have managed this way to stop flickering when mouse moves from toolbar to a button and vice versa