Анимированные изменения CSS (JQuery) - PullRequest
Новая
       38

Анимированные изменения CSS (JQuery)

0 голосов
/ 05 января 2019

Я пытался применить jQuery easing plugin к .css и .animate, но не работает, я не знаю почему, потому что обычно он работает. Пример кода: 

$('#img').hover(function() {
    $(this).animate({"border-radius":"5px"}, 0, "easeOutBounce");
}, function() {
    $(this).animate({"border-radius":"75px"}, 0, "easeOutBounce");
});

Так что в основном .animate (вместо .css, чтобы избежать проблем), но я также хочу установить продолжительность анимации и работу "easeOutBounce" или некоторые другие эффекты.

Теперь радиус границы анимируется на :hover, но без времени анимации.

Я не могу сделать это в css, и jQuery не работает, есть ли способ это исправить?

Спасибо, Oliver

Ответы [ 4 ]

0 голосов
/ 19 февраля 2019

попробуйте изменить временные эффекты, такие как ease out bounce

изменить на ease in

0 голосов
/ 07 января 2019

Я пробовал пример, который работает так, как он есть. 

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div class="block"></div>
<div class="block"></div>

$('div.block').hover(function(){
            $(this).animate({ borderRadius: '70px' }, 600, 'easeInBounce');
        },function(){
            $(this).animate({ borderRadius: '0px' }, 600, 'easeOutBounce');
        });
0 голосов
/ 19 февраля 2019

Эта функция должна работать: 

$('#img').hover(
  function() {
    $(this).animate({
      borderRadius: 75
    }, 300, 'easeOutBounce');
  },
  function() {
    $(this).animate({
      borderRadius: 5
    }, 300, 'easeOutBounce');
  }
);
0 голосов
/ 05 января 2019

Я думаю, что синтаксис, который вы используете в анимации, неверен. Кроме того, вам нужно установить длительность> 0, если вы хотите что-то увидеть.

Не стесняйтесь менять часть easing с помощью собственного плагина. 

$('#img').hover(
  function() {
    $(this).animate({
      borderRadius: 75
    }, 300, 'easeOutBounce');
  },
  function() {
    $(this).animate({
      borderRadius: 5
    }, 300, 'easeOutBounce');
  }
);
#img {
  border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

<img id="img" src="https://i.stack.imgur.com/Qk0jX.jpg">
...