CODEWITHSUNDEEP
jqueryhtml
Yasitha
Yasitha

Reputation: 911

jquery animation is not working as expected

my jquery script is 

<script>
$(document).ready(function () {

  $("#tt").mouseover(function () {
    $("#aa").animate({
      padding: "5px 0 5px 100px",
      backgroundColor: "#7EEFF7",
    });
  });

  $("#tt").mouseout(function () {
    $("#aa").animate({
      padding: "0"
    });
  });

});
</script>

my HTML code is like this

<li id="tt">
  <a id="aa" href="<?php echo base_url() . 'new_user'; ?>">New User</a>
</li>

in the browser when i move my mouse over this it is animating more than once. why this is happening ?

Upvotes: 0

Views: 52

Answers (3)

abinaya
abinaya

Reputation: 93

You can use complete:function() in animate function so when the animation is complete return to original value

<script>
$(document).ready(function () {
    $( "#tt" ).mouseover(function() {
        $( "#aa" ).animate({
            padding: "5px 0 5px 100px",
            backgroundColor: "#7EEFF7",
        }, {
            complete: function() {
            $( "#aa" ).css("padding","0px");
        }
        });
    });
});
</script>

Upvotes: 0

ucon89
ucon89

Reputation: 107

There is nothing wrong with your code. You just put animate begin when mouse enter a DOM with ID #tt.

In this case, if #tt does not have WIDTH, you can mouse over and out in white space. Test it to mouse over and out 3 times or more. jQuery will run the animate 3 times.

Solution: Add css width in your #tt. It will be work as you wish or use stop like Rajaprabhu mentioned it.

Upvotes: 1

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67187

You have to use .stop() to clear the animation queue before starting a new animation.

Try,

$(document).ready(function () {

  $("#tt").mouseover(function () {
    $("#aa").stop().animate({
      padding: "5px 0 5px 100px",
      backgroundColor: "#7EEFF7",
    });
  });

  $("#tt").mouseout(function () {
    $("#aa").stop().animate({
      padding: "0"
    });
  });

});

Upvotes: 1

Related Questions