JavaScript « Замедление анимации в jQuery

Суть проблемы: в jQuery есть возможность создавать собственную анимацию, используя метод "animate". Но у этого способа есть один недостаток, который я пока не знаю как побороть - анимация плавно замедляется в конце. Мне же нужно, чтобы анимация была равномерной на всем отведенном промежутке времени.
Реально ли побороть данный недостаток или мне придется писать собственную функцию для анимирования элементов?
0
animate javascript jquery анимация

1 ответов

Да, это возможно) Дело в том, что существует опциональный параметр easing:
http://docs.jquery.com/Effects/animate#paramsdurationeasingcallback
Вот пример из документации, несколько модифицированный для визуального сравнения:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 
  <script>
  $(document).ready(function(){
   
    // Using multiple unit types within one animation.
    $("#go").click(function(){
      $("#block").animate({
        width: "70%",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em",
        borderWidth: "10px"
      }, 1500 ,"swing");
    });
   
    $("#go2").click(function(){
      $("#block2").animate({
        width: "70%",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em",
        borderWidth: "10px"
      }, 1500 ,"linear");
    });

  });
  </script>
  <style>
  div {
    background-color:#bca;
    width:100px;
    border:1px solid green;
  }
  </style>
</head>
<body>
  <button id="go">Run</button>
  <div id="block">Hello!</div>
  <button id="go2">Run</button>
  <div id="block2">Hello!</div>
</body>
 
Надеюсь помог)
1

div {
     width: 100px;
     height: 100px;
     background-color: black;
    -webkit-transition: width 1s linear;
    -o-transition: width 1s linear;
    -moz-transition: width 1s linear;
    -ms-transition: width 1s linear;
}
div:hover {
    width: 0;
}
 

Без скриптов, просто CSS))
0