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

The length of the scope variable generates an error

var example = $scope.newgoal.gTitle; console.log(example.length); Even running this short code test, it throws an error message: TypeError: Cannot read property 'length' of undefined I've attempted to find various solutions without succes ...

javascriptangularjsionic-framework

Unable to pass the jQuery value - troubleshooting tips for Laravel

JavaScript Issue return response()->json([ 'category' => $category, 'editRoute' => $artistCategoriesEditRoute ]); AJAX Response category Object { id: 1, title: "tt", parent_id: 0, … } id ...

javascriptjqueryajaxlaravel

Interactive div with dynamically generated click event

I need to add an onclick event to a button that is being generated dynamically via ajax. How can I achieve this? This is the code responsible for generating the content. When we click on an item, I want a popup window to appear. function retrieveTableDat ...

jqueryhtmlajaxlive

Creating a mandatory 'Select' dropdown field in Vue.js

Hello, I am a beginner in VueJS and I am trying to make a select element from a drop-down list required. I attempted to add the required attribute as shown in the code below. Any suggestions on how to achieve this? Thanks. <v-select ...

javascripthtmlvue.js

Retrieving ng-model using ng-change in AngularJS

Here is an example of the HTML code I am currently working with: <select ng-model="country" ng-options="c.name for c in countries" ng-change="filterByCountry"></select> This HTML snippet is being populated by the following object containing a ...

javascriptangularjs

css Sibling elements restricted within parent container

Encountering an issue with a star rating css example when more than one fieldset is added. The current CSS code seems to be working fine, but it fails when multiple instances of the same elements [fieldset] are present. I've been struggling to find a ...

htmlcssratingsiblings

Having trouble retrieving data values from methods within my Vue.js component

I am having trouble accessing the lat and lng values from the data() method within the maps() method. Here is a link to my Vue.js component code: https://gist.github.com/melvin2016/c8082e27b9c50964dcc742ecff853080 Here is an image of the console showing ...

javascriptgoogle-maps-api-3vue.jsfrontend

Manipulating arrays and troubleshooting Typescript errors in Vue JS

I am attempting to compare the elements in one list (list A) with another list (list B), and if there is a match, I want to change a property/field of the corresponding items in list B to a boolean value. Below is the code snippet: export default defineCo ...

javascriptarraystypescriptvue.js

Implementing Angular2 with conditional loading

One of the requirements for my project is to redirect users to the login page before loading the Angular2 application, without actually loading it. The project is built using angular2-quicksart. After minifying the Angular2 js file: <script> va ...

javascripthtmlangularsystemjs

AngularJS - Swipe to update

I've been trying to use the pull to refresh plugin for Angular JS, but unfortunately it's not working for me. Even though I can see the text, when I try to pull nothing happens! I followed all the steps outlined on this GitHub page: https://githu ...

javascriptangularjs

Exploring hierarchical information within a JSON response from a Wiki API

As a newcomer to this field, I am currently exploring ways to access Wikipedia's API for extracting the value of "extract" and adding it to an HTML element dynamically. The challenge lies in the fact that the information is subject to change based on ...

javascriptjqueryjsonparsingwikipedia-api

The functionality of tinymce setContent can only be activated by directly clicking on it

Everything is running smoothly with the code below: $('.atitle').on('click', function(){ console.log('323'); tinymce.get("ed").setContent("<p>lorem ipsum</p>"); // it's working ...

javascriptjquerytinymce

When a block is clicked, jQuery will reveal that block while hiding the others sequentially, starting with the second block, then the third, and finally the fourth

Creating a navigation menu with 4 blocks can be a bit tricky, especially when trying to show one block at a time upon click. Here is my code attempt, but unfortunately it's not working as expected. I would greatly appreciate any help or suggestions on ...

javascriptjqueryhtmlcss

Tips for avoiding a form reload on onSubmit during unit testing with jasmine

I'm currently working on a unit test to ensure that a user can't submit a form until all fields have been filled out. The test itself is functioning correctly and passes, but the problem arises when the default behavior of form submission causes ...

javascriptangulartypescriptunit-testingjasmine

In order for Jquery's html() and dialog functionalities to work seamlessly, the inclusion of an alert box is imperative

I've encountered a strange issue that I can't explain. For some reason, the code below only works correctly (fetching the HTML from the Action in the controller) if an alert box is displayed before the dialog opens. var ticks; function In ...

jqueryasp.net-mvc-4

Utilizing Node.js within a closed intranet environment

Utilizing Nodejs's npm has proven to be quite convenient. Thus, I made the decision to incorporate it into my company's project. However, a predicament arises as my company mandates development within a closed network. This restricts my access s ...

javascriptnode.jsnpm

Converting PHP variables to JavaScript using AJAX and XML communication

In order to gain a deeper understanding, I am determined to tackle this task without relying on jQuery. This means I am willing to reinvent the wheel in order to fully comprehend how it functions. My research has led me to believe that AJAX is the key to a ...

javascriptphpjqueryajax

Raspberry Pi encountering a TypeError with Node.js async parallel: "task is not a function" error

I am new to nodejs, so I kindly ask for your understanding if my questions seem simple. I am attempting to use nodejs on a Raspberry Pi 3 to control two motors, and I keep encountering the error message "async task is not a function." Despite searching fo ...

javascriptnode.jsraspberry-piraspberry-pi3

Stub Node - Constructor Implementation

I've been searching for a solution for quite some time with no success, I have the following code that I want to test: some_script.js var Model = require('./models') exports.tokenizeCard = function (args) { var model = new Model(&apos ...

javascriptnode.jsunit-testingsinon

How to Left Align Div Centered Within Another Div?

I've encountered an issue with centering icons in my HTML code. Despite trying to fix it myself, the icons always appear left-aligned. I would greatly appreciate any assistance from the helpful members of this community. It's likely a simple fix ...

csshtmlcss-float