CODEWITHSUNDEEP
javascriptjqueryhtmlcsshover
omega
omega

Reputation: 43833

jquery hover effect not working right

In my jquery mobile app, I want to hover on my items with class grid-item, and have it change width and height at the same time in an animation. I have this code

    $('.grid-item').hover(function(){        
        $(this).animate({ 
            "width" : "200px",
            "height": "200px"
        }, "fast");
    }, function(){
        $(this).animate({ 
            "width" : "100px",
            "height": "100px"
        }, "fast");
    });

But the problem is, when I test it, the height changed first fast, then when it reaches 200px, the width changes slow to 200px. I want the width and height to change at the same time and fast.

Does anyone know what is wrong?

Thanks

Upvotes: 0

Views: 252

Answers (1)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

Just use css

.grid-item{
  width: 100px;
  height: 100px;
  background: red;
  transition: all 300ms ease
}
.grid-item:hover{
  width: 200px;
  height: 200px;
}
<div class=grid-item></div>

But if you really want to use jquery use try this 

$(".grid-item").hover( function(){$(this).addClass("hover")},function(){$(this).removeClass("hover")})
.grid-item{
  width: 100px;
  height: 100px;
  background: red;
  transition: all 300ms ease
}
.grid-item.hover{
  width: 200px;
  height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=grid-item></div>

here is the same example with animate(your code is just working fine!) but using animate is bad since it will be buggy if you try to hover fast and back several times so use css please.

$('.grid-item').hover(function(){        
  $(this).animate({ 
    "width" : "200px",
    "height": "200px"
  }, "fast");
}, function(){
  $(this).animate({ 
    "width" : "100px",
    "height": "100px"
  }, "fast");
});
.grid-item{
  width: 100px;
  height: 100px;
  background: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=grid-item></div>

Upvotes: 2

Related Questions