locked
Jquery animate not working properly in a metro app

    Question

  • In my metro app,I am trying to use jquery animate "margin-left" on an element which has got few children .The problem is that the "animate" works fine sometimes but sometimes only few of the children move and the rest stay stationery but when I switch to desktop mode and switch back again to the app, the other children elements rearrange themselves.

    It seems like it has got noting to do with the code as it works fine most of the time but after I try it lot of times it starts showing this behavior.

    Can there be a workaround?

    I know this is kind-of vague but I can't put the code in here.


    • Edited by gaurav_kl Monday, August 6, 2012 7:55 PM
    Monday, August 6, 2012 7:54 PM

Answers

  • Hi Gaurav,

    jQuery animation is outside of the scope of what we support in the forums.  I can help you do some troubleshooting to narrow the issue down however. 

    Let's try and scope this further...

    Have you engaged jQuery help?  Does this repro outside of your app in a browser?  Does this repro with other browsers?  Have you looked at using the WinJS animation library instead?  The WinJS animation library is definitely something I can help you with!

    -Jeff


    Jeff Sanders (MSFT)

    • Marked as answer by Dino He Monday, September 24, 2012 3:24 AM
    Thursday, August 9, 2012 12:57 PM
    Moderator

All replies

  • HI

    It's sounds like a known issue, could you please build a simple repro project here?

    It is not necessary that you send out the complete source of your project. We just need a simplest sample to reproduce the problem.

    You can remove any confidential information or business logic from it. then we can find the issue more conveniently and provide further suggestions for you.

    Tuesday, August 7, 2012 6:14 AM
  • Hi

    Thanks for the response.While creating the simple sample app I found that the issue was coming if I used "transition" CSS property on the element before the Jquery "animate" and it worked fine if I remove it.

    Still I would like to get some concrete answer,hence I have uploaded the sample app project at Skydrive http://sdrv.ms/Ms8F58

    To reproduce the issue,run the app ,click on the icon in the top-right corner and click on the icon again to remove the overlay.

    Now click on any of the "blue" or "purple" areas on the sides which'll give the weird panning effect.

    You can try switching the "transition: all 500ms linear" to "transition: none 500ms linear" in "test.js" and the same flow will work fine.

    Wednesday, August 8, 2012 12:02 AM
  • Hi Gaurav,

    jQuery animation is outside of the scope of what we support in the forums.  I can help you do some troubleshooting to narrow the issue down however. 

    Let's try and scope this further...

    Have you engaged jQuery help?  Does this repro outside of your app in a browser?  Does this repro with other browsers?  Have you looked at using the WinJS animation library instead?  The WinJS animation library is definitely something I can help you with!

    -Jeff


    Jeff Sanders (MSFT)

    • Marked as answer by Dino He Monday, September 24, 2012 3:24 AM
    Thursday, August 9, 2012 12:57 PM
    Moderator