1 Reply Latest reply on Dec 16, 2012 4:26 AM by joel_pau

    TIP: Cycling/Cancelling Animation using jQuery

    Ashish Gatne

      Thought this would be worth sharing with you folks if you're wondering how to cancel animations midway or force cycling et cetera...

       

      From the page...

      • Animate wide on mouseEnter
      • Animate back on mouseLeave
      • No matter what, perform a complete wide/back cycle
      • Not queue up animations on multiple hovers
      • Be smooth

       

       

      http://css-tricks.com/examples/jQueryStop/

        • 1. Re: TIP: Cycling/Cancelling Animation using jQuery
          joel_pau Level 5

          yes but:

           

          1) Edge UI provides:

          • mouseenter
          • mouseleave

          mouseEvents.jpg

          We known that .hover() use both mouseenter and mouseleave.

          And we known that mouseenter and mouseleave work better than mouseover and mouseout using apple devices.

           

          2) Edge API provides:

          • isPlaying()
          • isPlayDirectionReverse()

          isPlaying

          Description: Returns a boolean that indicates whether the default timeline is playing.

          Example

          if (sym.isPlaying()) { console.log("Timeline is currently playing."); }

          isPlayDirectionReverse

          Description: Returns a boolean that indicates whether the default timeline play direction is reverse.

          Example

          if (sym.isPlayDirectionReverse()) { console.log("playing backwards through the timeline"); }

           

          Therefore:

          (':not(:animated)') or (!$(this).hasClass('animated')) can be replaced by sym.isPlaying().