Эффект jquery hover не работает правильно

Question

В моем мобильном приложении jQuery я хочу навести курсор на мои объекты с помощью элемента grid-item и изменить его ширину и высоту в анимации. У меня этот код

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

вот такой же пример с анимацией (ваш код работает нормально!), Но использование анимации плохое, так как это будет ошибкой, если вы попытаетесь навести быстро и обратно несколько раз, поэтому используйте 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>