jquery 悬停效果不正确

Question

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

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

但问题是，我测试的时候，先是高度变快，然后到了200px，宽度变慢到200px。我想让宽度和高度同时快速变化

有谁知道哪里出了问题吗？

谢谢

Answer 1

只需使用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>

但如果你真的想使用 jquery 试试这个

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

这里是使用 animate 的相同示例（您的代码工作正常！）但是使用 animate 是不好的，因为如果您尝试快速悬停并返回几次，它会出现错误，所以请使用 css。

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

jquery 悬停效果不正确

jquery hover effect not working right

html

javascript

css

jquery

hover