Using jQuery to reset the position of animated divs

I am currently working on a code that expands and centers a div when hovered upon using the following script:

    $(document).ready(function(){         


    //animation on hover            

        $('#sliding_grid li').hover(function() {
          $(this).addClass('highlight');
        }, function() {
          //$(this).removeClass('highlight');
        });

        $(".highlight").live("hover", function(){
            $(this).animate({"width": "454px", "height":"282px", "top: ":"94px", "left":"152px", "margin-top: ":"-94px", "margin-left":"-152px"}, 500);       

        });   

        $(".highlight").live("mouseout", function(){
            $(this).animate({"width": "148px", "height":"90px", "top: ":"0px", "left":"0px", "margin-top: ":"0", "margin-left":"0"}, 500, function(){
             $(this).removeClass('highlight');   
            });        

        });        

    });

The issues I am facing are as follows:

1) I'm struggling with resetting the "top" and "left" css coordinates to their original values on mouseOut. You can view a demo of this here:

http://jsfiddle.net/kTFvj/1/

2) The z-index is not affecting the hovered grid elements as expected. More details can be found here: http://jsfiddle.net/kTFvj/1/

javascriptjquerycss

Answer №1

If you want to store and retrieve original values on mouseout, consider using jQuery's .data method.

I've made a modification to your code that incorporates the use of .data and also updates the z-index to keep the active element on top all the time.

Check out the updated code here: http://jsfiddle.net/kTFvj/2/

Answer №2

  1. Remember to save the values at the start of the animation using a variable, and then restore them when it's finished, as Martin recommended.

  2. Regarding z-Index: Create a variable named maxZIndex=0 and increment it every time an animation starts to set the object's zIndex property.

Answer №3

Have you considered using percentages instead of pixels?

One alternative solution could be storing the current values of width and height in variables, then restoring them on mouse out.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When using a jsonp ajax call, the response is successfully returned as json in Firebug, but unfortunately it

After encountering a jsonp cross domain ajax query, I am facing an issue where the jQuery ajax function's error part is triggered despite receiving a status of 200 OK and a status text of success. Even though I can monitor the response in Firebug and ...

jqueryajaxjsoncross-domainjsonp

Unable to perform dynamic query with $in operator in Mongoose find method

I am currently utilizing Node.js along with Mongoose version 5+ to create a dynamic query in my database. The variable filterField represents the field name, while filterValues is an array. Here is an example of how my code looks: if (req.currentUser.acti ...

javascriptnode.jsmongodbmongoose

Using webpack to bundle node_modules into your application

I am facing an issue while trying to load some modules like: moment echarts In my package.json file, I have the following versions specified: "echarts": "^3.1.10" "moment": "^2.14.1" However, I am encountering the errors below: VM2282:1 Uncaught Ref ...

javascriptnode.jsangularwebpack

Executing a function after an AngularJS directive's reference function has been called

<CustomDirective customValue="someValue" anotherFunctionRef="anotherFunction()"></CustomDirective> angular.module('AppName', ['OtherDependencies']). directive('CustomDirective', ...

javascriptangularjsangularjs-directive

Waiting for the execution of the loop to be completed before proceeding - Typescript (Angular)

There's a code snippet triggered on an HTML page when clicked: public salaryConfirmation() { const matDialogConfig: MatDialogConfig = _.cloneDeep(GajiIdSettings.DIALOG_CONFIG); this.warningNameList = []; for(let i=0; i < this.kelolaDat ...

javascriptangulartypescript

Is it possible to use PHP to replace a specific string on a webpage with a unique identifier from a select box?

I am currently attempting to replace a string with a select box. Below are the codes that illustrate my objective. The following code is the original version that I want to modify. <div id="a"> <div id="a1">{box}</div> <div id=" ...

phpjquerystringreplace

Designating a certain function to a designated button

On my page, I have three different forms with submit buttons in each. There is a code that is supposed to change the value of a button in a specific form when clicked. However, whenever I click on any submit button, all the values in the buttons of the v ...

javascriptjqueryajax

Automatically selecting and fetching checkbox values using JavaScript

I was struggling with coding a function that involved generating checkboxes using JavaScript. My goal is to automatically select the elements "March" and "September" from the array target[] and display them as checked in the text area. So, "March" and "Se ...

javascripthtmlarrayscheckbox

Troubleshooting the error message "XMLHttpRequest cannot load" when using AngularJS and WebApi

I have developed an asp.net webApi and successfully published it on somee.com. When I access the link xxxx.somee.com/api/xxxx, everything works fine. However, when I try to call it in Angularjs, it does not work. $http.get('http://xxxxxx.somee.com/ap ...

javascriptangularjsasp.net-web-api

Tips for Aligning Form Elements in the Middle using Bootstrap

What could be the issue? I can clearly see the container border, indicating the space available for my work. However, when I insert the row (div) and offset (div), the content gets left-justified. <div id="page" class="container" style="border:soli ...

csstwitter-bootstrap

Are there any testing frameworks available for JavaScript that are similar to Junit and specifically designed for testing object-oriented JavaScript within Node

What are some recommended methods for testing object-oriented JavaScript in Node.js? For instance, let's consider the following Cat.js class: function Cat(age, name) { this.name = name || null; this.age = age || null; } Cat.prototype.getAge ...

javascriptnode.jsoopunit-testingtesting

The list attribute in AngularJS seems to be malfunctioning when used in Internet Explorer 11

My current issue involves using the 'find' method within a scope. While it works perfectly fine in Chrome, there seems to be compatibility issues with Internet Explorer 11. How can I resolve this and make it work smoothly on IE 11? $scope.NameLi ...

javascriptangularjsinternet-explorer-11

Executing a class function within the ajax success method

I am attempting to set a variable inside the success callback of an AJAX call. I understand that in order to assign the value, I need to use a callback function. However, I want that function to be within the class. Is it feasible to implement something li ...

javascriptajax

Transform from a class-based component to a function-based component

Currently experimenting with AutoComplete and AutoFill features in React. My goal is to transition the code into using React hooks, as I have primarily used hooks throughout my project. I've made some progress in converting it to a hook-based struct ...

javascriptnode.jsreactjsreact-hooks

Increase the value of a property within an array of objects based on certain conditions

My task involves incrementing the rank value by one until the name property changes. I am utilizing the page and rank properties to track when this change occurs. In addition, I want to increment it once whenever the type is not equal to none, and then re ...

javascriptarraysobject

Arrays cannot be used with $addFields in MongoDB

I have encountered a challenge where I am dealing with a field that can be either a string or an array. How can I handle this scenario in the $addField query? Below is my MongoDB query code snippet: db.ledger_scheme_logs.aggregate([ { $match ...

javascriptnode.jsmongodb

How can I resolve the issue of "require is not defined" in the code?

tag, you can find the following code snippet: Upon importing the 'mysql' module, an issue persists in the browser matching the error indicated by the title. Starting my journey into programming, I aim to develop a membership registration functio ...

javascriptnode.jsmembership

How can I make v-for display additional profiles to achieve an infinite scroll effect?

Hey there! I've got a Firestore database set up to fetch profiles and display them on a page using v-for. I want to implement infinite scroll for a smoother user experience. Here's the JavaScript composable code I'm working with: import { pr ...

javascriptvue.js

What is the best way to fetch all Firebase database IDs using Angular?

Is there a way to fetch all data from Firebase database along with their respective IDs? Currently, I have two functions - getAll() and get(input) that retrieve specific products based on the given ID. However, my current implementation only returns obje ...

htmlcssangulartypescript

Utilize jQuery's validate function to compare and assess two different time values

I am working on a project where I have two select dropdowns, one for selecting a time from and the other for selecting a time to. The options in these selects are in intervals of fifteen minutes. I use PHP's strtotime function to convert these selecte ...

phpjqueryvalidationcomparison