jquery hover effect not functioning properly

Question

jquery hover effect not functioning properly

I have a question regarding my jquery mobile application. I am trying to implement a hover effect on items with the class grid-item, where the width and height change simultaneously in an animation. Here is the code snippet I am using:

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

The issue I am facing is that when I test it, the height changes quickly first, and then the width changes slowly to 200px once the height reaches its target value. I want both the width and height to change simultaneously and quickly.

If anyone has any insights into what might be causing this problem or how to resolve it, I would greatly appreciate your input.

Thank you!

javascript jquery html css hover

Answer 1

Answer №1

Utilize CSS for this task

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

<div class=grid-item></div>

However, if jQuery is necessary, consider the following approach:

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

The example can also be achieved using `animate`, but it is advised to stick with CSS due to potential bugs when hovering rapidly.

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

Answer 2

Utilize CSS for this task

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

<div class=grid-item></div>

However, if jQuery is necessary, consider the following approach:

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

The example can also be achieved using `animate`, but it is advised to stick with CSS due to potential bugs when hovering rapidly.

$('.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 hover effect not functioning properly

Answer №1

Similar questions

React Router: Dispatch not triggering when route changes

Middleware in Express can be executed more than once

Can the bottom border on an input textfield be removed specifically under the new character?

Using CSS units such as vw, vh, or percentage to specify height is not possible

Do we actually need all of these DIVs?

Issue Encountered While Attempting to Show a Div Element within a Function

Is there an alternative function that can be used in place of live() in jQuery version 1.26?

Selector for the Nth child element

Exploring the Intersection of jQuery and Rails in Dynamic Form Development

"Error encountered: Array is undefined when using the map and subscribe functions in Ionic

Tips for aligning and emphasizing HTML content with audio stimuli

Sending the slider value from a website to a program when the slider is adjusted

How can I efficiently load AJAX JSON data into HTML elements using jQuery with minimal code?

The DOM is failing to refresh in Vue.js even after the array has been updated

The issue encountered is a TypeError stating that it is unable to retrieve properties of an undefined value, specifically in relation to the 'imageUrl

Unable to dismiss a Popup Dialog Box using Selenium Webdriver in Python(Element is not visible at the moment and cannot be interacted with)

Save the result of a terminal command into an sqlite database

Converting a Click Event to a Scheduled Event using JavaScript and AJAX

Issue with child div exceeding 100% height within CSS Flexbox causing inconsistency in Firefox and Chrome browsers

The issue arises when attempting to utilize ExpressJS middleware in conjunction with NextJS Link feature