CODEWITHSUNDEEP
jqueryjquery-uijquery-animatejquery-hover
dzenesiz
dzenesiz

Reputation: 1542

jQuery hover doesn't animate but has delay

I have a problem with jQuery or jQuery UI. I want to animate a button on hover, but instead of animating it smoothly, it waits for specified time and then pops the change instantly. Any suggestions?

When I zoom in in Chrome, it seems the change is a two-step process. Maybe because it isn't much of a change, so it processes it that way?

$(".btn-form").hover(
        function() {
            $(this).stop().animate(
            {
                borderWidth : "2px",
                borderColor : "#B27332"
            }, 500);
        },
        function() {
            $(this).stop().animate(
            {
                borderWidth : "1px",
                borderColor : "gray"
            }, 500);
        });

Upvotes: 1

Views: 46

Answers (1)

johnyduval
johnyduval

Reputation: 26

Your code works! Unfortunately, changes to the border from 1px to 2px in a smooth manner are not perceivable.

You can also try obtaining the same result using CSS-transition.

.btn-form {
border: 1px solid gray;
transition: border 500ms;
}

.btn-form:hover {
border: 2px solid #B27332;
}

Upvotes: 1

Related Questions