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

The php script fails to return any response to Ajax

What is the best way to ensure that one method waits for another method to complete before proceeding?

Is it possible to retract a message on Discord after it has been sent?

Using VB.NET with Selenium to locate and interact with dropdown elements

Controlling Node.js application with Electron app: initiating and terminating

How can you merge one object with two different mongoose models?

Having difficulty retrieving the current time of an audio element using jQuery

This is the command that includes the line "test": "tsc && concurrently "karma start karma.conf.js""

The database does not get updated by an Ajax request without a page refresh

Rails controller did not receive the Ajax call

Encountered an error in NodeJs with mongoDB: TypeError stating that property 'fullname' is not defined

Retrieve specific elements from an array based on the other elements present in the array

Utilizing System.import with Webpack 2 and React for splitting code and managing nested routes

When the parent element is already set to justify its content with flexbox, you can ensure equal heights for CSS classes by utilizing

Using CodeIgniter, input information into a textbox and verify if there is a corresponding record in the database when submitting

Error: unexpected syntax error at the end of the for loop in PHP MySQL

Identifying the Operating System of Your Device: iOS, Android or Desktop

unable to implement multiple layouts while utilizing react-router

What is the easiest way to modify the color of a basic PNG image in a web browser?

What could be causing the "Cannot POST /api/" error to occur when attempting to submit a form?