1. #1
    Ext User
    Join Date
    Feb 2008
    Posts
    3
    Vote Rating
    0
    ngeorgopoulos is on a distinguished road

      0  

    Default [SOLVED] Toolbar fadeIn/fadeOut animation on mouseover/mouseout problem

    [SOLVED] Toolbar fadeIn/fadeOut animation on mouseover/mouseout problem


    Hi,

    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)

    Code:
     
    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?

    tia
    nikos

    I finally got it to work using the following code
    SOLUTION:

    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 {
    tb.runner.stop(this);
    } catch (err){}
    },
    interval: 500 
    }
    
    els.on('mouseover', function(e){
    tb.runner.stopAll();
    if (tb.isTransparent) {
    els.shift({ opacity: 1 });
    tb.isTransparent = false;
    } 
    });
    els.on('mouseout', function(e){
    if (!tb.isTransparent) {
    tb.runner.start(taskMakeTransparent); 
    } 
    });
    
    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
    Last edited by ngeorgopoulos; 22 Feb 2008 at 2:09 AM. Reason: Solved

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar