Animated css change (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

Pingolin · Accepted Answer · 2019-01-07 07:34:35Z

2

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.sstatic.net/Qk0jX.jpg">

edited Jan 7, 2019 at 7:34

answered Jan 5, 2019 at 20:30

Pingolin

3,4677 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Oliver Over a year ago

Thanks, but its not working with effect.. for example i want easeOutBounce, (gsgd.co.uk/sandbox/jquery/easing) and it not works :/ .

Oliver Over a year ago

Is possible make this timing effect.. in jquery? If plugin not works with .animate (idk why)

Pingolin Over a year ago

Hi @Oliver, I changed the easing to easeOutBounce, you can check in my snippet.

user11085994 · Accepted Answer · 2019-02-19 17:52:22Z

1

This function should work:

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

answered Feb 19, 2019 at 17:52

user11085994

Comments

Vickel · Accepted Answer · 2019-02-19 18:03:47Z

0

try to modify timing effects like ease out bounce

change it to ease in

edited Feb 19, 2019 at 18:03

Vickel

7,9906 gold badges40 silver badges63 bronze badges

answered Feb 19, 2019 at 18:02

user11086029

Collectives™ on Stack Overflow

Animated css change (jQuery)

3 Answers 3

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Related