Question

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

    $('.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悬停效果不正常

1 个答案: