1. #1
    Sencha User charleshimmer's Avatar
    Join Date
    Jul 2008
    Location
    Austin, TX
    Posts
    329
    Vote Rating
    0
    charleshimmer is on a distinguished road

      0  

    Default Simple ext.element animation

    Simple ext.element animation


    I want to animate the toggling on and off of a css class on an ext.element but can't seem to figure it out.

    I can get el.toggleClass('my-class') to work but I want it to animate the transition. Is there an obvious way to do this animation with ExtJS that I'm over looking?

    What I really want to do is animate the changing of the background position on an element but I can't seem to get that to work either. I tried this

    PHP Code:
     el.animate(
                {
                    
    backgroundPosition: {to'-53px 0'from'0 0'},
                },
                
    3000,      // animation duration (milliseconds!)
                
    null,      // callback
                
    'easeOut'// easing method
                
    'motion'   // animation type ('run','color','motion','scroll')
            
    ); 
    But that didn't work either. Any ideas?

  2. #2
    Ext JS Premium Member
    Join Date
    Apr 2010
    Posts
    236
    Vote Rating
    0
    dduffy is on a distinguished road

      0  

    Default


    maye try some simple like this and check if it is working, assumption is the FX class is loaded.
    aBox = Ext.get('DIV-ID');
    aBox.highlight()

  3. #3
    Sencha User charleshimmer's Avatar
    Join Date
    Jul 2008
    Location
    Austin, TX
    Posts
    329
    Vote Rating
    0
    charleshimmer is on a distinguished road

      0  

    Default


    Yeah I did and I can get animations to run, just not on the backgroundPosition attribute or on the toggling on / off of a CSS class.

    I have done ExtJS animations before and was supried to find this not as straight foward as I thought it would be. Hopefully I'm just overlooking something

    Any other ideas?

  4. #4
    Sencha User charleshimmer's Avatar
    Join Date
    Jul 2008
    Location
    Austin, TX
    Posts
    329
    Vote Rating
    0
    charleshimmer is on a distinguished road

      0  

    Default


    I couldn't find anyway to do this in ExtJS so I just did it in jQuery like this.

    Code:
    $(this.switch.child('img').dom).animate({
                    backgroundPosition:'-53px 0px'
                },300);
    There is a jQuery UI effect that allows you to animate between two css classes but I decided to just do the background Position.

  5. #5
    Ext JS Premium Member
    Join Date
    Apr 2010
    Posts
    236
    Vote Rating
    0
    dduffy is on a distinguished road

      0  

    Default


    thats interesting, thanks for sharing.

  6. #6
    Sencha User charleshimmer's Avatar
    Join Date
    Jul 2008
    Location
    Austin, TX
    Posts
    329
    Vote Rating
    0
    charleshimmer is on a distinguished road

      0  

    Default


    Yeah I was surprised ExtJS animate didn't take into account a CSS property like background position.

    Doing this did raise a question though. I was under the impression you're suppose to use the jQuery adapter if you use jQuery and ExtJS together but I couldn't get the adapter to work. I just used the normal ext-base.js and then included jQuery after that. Anybody know if there is any problem with this? Seems to work fine right now.

  7. #7
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    It's a bit more javascript to include, but it's a lot more reliable, because the adapter isn't updated for every jQuery version.

  8. #8
    Sencha User charleshimmer's Avatar
    Join Date
    Jul 2008
    Location
    Austin, TX
    Posts
    329
    Vote Rating
    0
    charleshimmer is on a distinguished road

      0  

    Default


    That makes sense. They are both scoped to different name spaces so I wouldn't imagine there would be conflicts.

    Thanks Condor!

  9. #9
    Ext JS Premium Member
    Join Date
    Apr 2010
    Posts
    236
    Vote Rating
    0
    dduffy is on a distinguished road

      0  

    Default


    personnally had some issues with integration with the prototype JS lib that has been documented previosuly in the forums, my recommendation is not to rely heaviliy on both libs working seamlessly, they do tend to work well but are not perfect.

Similar Threads

  1. [SOLVED] Element color animation?
    By vmorale4 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 7 May 2008, 1:03 PM
  2. get Ext.element from a window object for animation
    By mxu in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 7 Jan 2008, 12:01 PM
  3. How do I know if an Ext.Element is running an animation?
    By rodiniz in forum Ext 1.x: Help & Discussion
    Replies: 9
    Last Post: 13 Sep 2007, 6:58 AM
  4. can't stop element animation
    By hicker in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 14 May 2007, 12:39 AM

Thread Participants: 2