JQuery Question

• nosaj

  I'm trying to figure out how to have multiple animations with different durations occur simultaneously on the same element.

  For example
  1) I want an element to slide left 1000 over 10 seconds.
  2) During the 1st 2 seconds of the slide in I want the opacity to animate from 0 to 1.
  3) During the last 2 seconds I want the opacity to animate from 1 to 0.

  Basically having an object sliding left to right fade in and fade out while sliding.

  This seems to cover the 1st 2 steps, any suggestions on how to trigger the last fadeout?
  $("#something")
  .animate({opacity: 1, queue: false}, 2000)
  .animate({left: 1000 +"px", queue: false}, 10000);

  nosaj

  Flag

• mekk0

  Use the step function:
  http://api.jquery.com/animate/

  mekk 0Permalink

  UpvoteDownvote

  Dogear

  Flag

  • actually this is what you needdbloc

  Show [[ numHiddenNotes ]] more notesAdd Note

  SaveCancel

• dbloc0

  http://api.jquery.com/bind/
  

  dbloc 0Permalink

  UpvoteDownvote

  Dogear

  Flag

  Show [[ numHiddenNotes ]] more notesAdd Note

  SaveCancel

• kingsteven0

  you're actually nearly right nosaj, just fucked up your syntax a bit... you dont need step... just like this:

  http://jsfiddle.net/v7c8S/

  kingsteven 0Permalink

  UpvoteDownvote

  Dogear

  Flag

  Show [[ numHiddenNotes ]] more notesAdd Note

  SaveCancel

• nosaj0

  Thanks Kingsteven - If I want a delay before it fades out at the end is there a cleaner way to do it than this?

  http://jsfiddle.net/v7c8S/1/

  nosaj 0Permalink

  UpvoteDownvote

  Dogear

  Flag

  Show [[ numHiddenNotes ]] more notesAdd Note

  SaveCancel

• dbloc0

  add .delay(10000)

  dbloc 0Permalink

  UpvoteDownvote

  Dogear

  Flag

  • before the last animatedbloc
  • or wherever neededdbloc

  Show [[ numHiddenNotes ]] more notesAdd Note

  SaveCancel