jquery悬停效果不正常-jqueryhovereffectnotworkingright

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

在我的jquery移动应用程序中,我想悬停在带有类网格项的项目上,并在动画中同时更改宽度和高度。我有这个代码

    $('.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.

但问题是,当我测试它时,高度首先快速变化,然后当它达到200px时,宽度变化缓慢到200px。我希望宽度和高度同时快速变化。

Does anyone know what is wrong?

有谁知道什么是错的?

Thanks

1 个解决方案

.grid-item{
  width: 100px;
  height: 100px;
  background: red;
  transition: all 300ms ease
}
.grid-item:hover{
  width: 200px;
  height: 200px;
}

$(".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;
}

$('.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
}