动画CSS更改（jQuery）

Question

I was trying apply jQuery easing plugin to .css and .animate, but not working, i dont know why, because normally it works. Code example:

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

So basically .animate (instead of .css to avoid problems) but i want also set animation duration and working "easeOutBounce" or some of other effects.

Now border radius is animated on :hover , but without animation timing.

I cannot do it in css, and jQuery is not working, is there some way to fix this?

Thanks, Oliver

Answer 1

I think the syntax you are using in your animation is not correct. Also, you need to set a duration > 0 if you want to see something.

Feel free to change the easing part with your own plugin.

 $('#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"> 

Answer 2

This function should work:

$('#img').hover(
  function() {
    $(this).animate({
      borderRadius: 75
    }, 300, 'easeOutBounce');
  },
  function() {
    $(this).animate({
      borderRadius: 5
    }, 300, 'easeOutBounce');
  }
);

Answer 3

try to modify timing effects like ease out bounce

change it to ease in

Answer 4

I've tried a sample that works the way it is.

<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');
        });