Jquery.animate various speeds

Question

I am using the .animate function in jQuery. I have a div that slides using marginLeft, but I also need it to fade, but I need it to be slower than the marginLeft effect. With .animate, it might seem that I applied only one speed parameter.

<script type="text/javascript">
 $(document).ready(function(){
 $(".topFrameAnim").css("opacity", "0.0");
  $(".topFrameAnim").animate({
  marginLeft: "0",
    }, 500 );

    $(".topFrameAnim").animate({
  opacity: "1",
    }, 1000 ); // Need this effect to be applied at the same time, at a different speed.




    });


</script>

Answer 1

You need to use two forms of the animation argument, with queue:falsein the parameters array (in the first animation):

<script type="text/javascript">
 $(document).ready(function(){
 $(".topFrameAnim").css("opacity", "0.0")

 .animate({
  marginLeft: "0",
    }, { queue: false, duration: 500 )
  .animate({
  opacity: "1",
    }, 1000 ); // Need this effect to be applied at the same time, at a different speed.

    });


</script>

Note. Here you can reduce the number of selectors used. Since you select the same objects, it is better to reuse an existing object.