JQuery. одушевлять разные скорости

Question

Я использую функцию .animate в Jquery. У меня есть div, который скользит по использованию marginLeft, но мне также нужно, чтобы он постепенно увеличивался, но мне нужно, чтобы он был медленнее, чем эффект marginLeft. С .animate я могу применить только один параметр скорости.

<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

Вам необходимо использовать форму animate с двумя аргументами, с queue:false в массиве параметров (на первой анимации):

<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>

Примечание. Здесь можно анимировать, чтобы уменьшить количество используемых селекторов. Поскольку вы выбираете одни и те же объекты, лучше повторно использовать существующий объект.