Struggling to animate the selector of a nested div in Jquery?

Despite trying numerous variations, I am struggling to identify the correct selector of a nested div. The goal is to animate this particular div, but since no animations are taking place, I suspect that I have not selected the right element.

Here is the animation code snippet:

$(".lab1").hover(function(){
    $(".panel-group .panel", this).stop(true, false).animate({ marginTop: "-80px;"});  
    $(".panel", this).stop(true, false).animate({ height: "140px"});

}, function() {
     $("div.panel.panel-default", this).stop(true, false).animate({ marginTop: "0px;"});
    $(".panel", this).stop(true, false).animate({ height: "98px" });
});

The line responsible for adjusting the marginTop property is not functioning as intended. I have attempted using Chrome's developer tools to find the correct selector without success. Below is the relevant portion of my HTML:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true" style = "text-align: left;margin-top: 30px;">
<div class="lab1">  
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"><i class="fa fa-plus-square-o"></i><span style="margin-left: 12px; display: inline-block;"></span>Lab Focus: Cloud Management with vRealize Operations & <nobr>vRealize Automation</nobr></a>
      </h4>
    </div>

I am specifically aiming to target the second panel-default element. How can I successfully determine the appropriate selector?

javascriptjqueryhtmlcss

Answer №1

.panel-group does not belong to the hierarchy of elements under .lab1

Answer №2

Performing a double call to the stop() function on an element will result in the second call terminating the first animation even before it begins. Additionally, make sure not to include a ; within your string and animate this separately. The following code demonstrates this concept:

$(".lab1").hover(function() {
    $(".panel-group .panel").stop(true, false).animate({ marginTop: "-80px"});  //This is what we are trying to achieve
    $(".panel").animate({ height: "140px"});
    $(this).stop(true, false).animate({marginTop: "-80px",  height: "140px"});

}, function() {
    $(".panel-group .panel").stop(true, false).animate({ marginTop: "0px"});
    $(".panel").animate({ height: "98px" });
    $(this).stop(true, false).animate({marginTop: "0px",  height: "98px"});
});

Answer №3

The animation is in progress, but your code following the animation is causing it to stop prematurely. You can review this jsfiddle for more information. Additionally, there are some errors present. For instance, marginTop: "-80px;" does not require a semicolon at the end; it should be written as marginTop: "-80px". This line of code is halting the animation process, which is why you may not see the desired outcome.

$(".panel", this).stop(true, false).animate({ height: "140px"});

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

A plug-in for TinyMCE that allows users to adjust column widths within a table

We utilize TinyMCE in our content management system (CMS), and our users have expressed interest in being able to adjust the width of a column within a table. While HTML technically does not recognize columns, the Moodle editor HTMLAREA includes a plugin t ...

javascripthtmltinymce

Unexpected behavior with VueJS Select2 directive not triggering @change event

Recently, I implemented the Select2 directive for VueJS 1.0.15 by following the example provided on their official page. However, I am facing an issue where I am unable to capture the @change event. Here is the HTML code snippet: <select v-select="ite ...

javascriptjquery-select2vue.js

Utilizing Sequelize to search for existing items or create new ones in a list

My experience with sequelize is limited and I am having trouble understanding certain aspects. Despite my efforts to search for more information, I couldn't find anything specific that addresses my confusion. // API Method function SeederApi(req: Req ...

javascriptnode.jstypescriptsequelize.js

How come my uploaded Excel Javascript add-on opens in an external browser instead of the task pane?

Note: It has come to my attention that I must save the taskpane.html file on my local drive before it opens in an external browser. This detail slipped my notice last week. I am currently developing a Javascript, or rather Typescript, API add-in for Excel ...

javascriptexceltypescriptvisual-studio-codeoffice-js

The process of passing parameter values by function in useEffect

Hi everyone, I hope you're all doing well. I'm currently facing an issue with trying to retrieve data from my API using the post method. The problem is that I can't use useEffect in any parameter. So, my workaround is to pass the data throug ...

javascriptreactjsaxiosuse-effectmern

Displaying a message text upon successful AJAX request

I have a web page with an AJAX request that updates data in the database. After the update, I want to display a message to the user on the webpage confirming that the data has been successfully updated. However, currently, no message is being displayed and ...

javascriptphphtmlajax

Converting an array of objects into a single object: A step-by-step

I'm looking to transform an array of objects into a final output of objects. My initial array of objects looks like this: [ { "id": "11", "value" : "9999","sample":"1"}, { "id": "22", "value" : "8888","sample":"2"}, { "id": "33", "value" : ...

javascriptnode.js

Assistance needed with dynamically resizing a background image

Is there a way to automatically adjust the size of a background image for an element? For instance, I want my links in HTML to have a background image with slanted borders and rounded corners. Usually, you would set the width of the anchor element to fit t ...

javascriptcss

Leveraging jQuery selectors to manipulate data received from an Ajax response

I am encountering an issue with an Ajax call and response. Previously, I had a block of regular javascript code that successfully transformed my select element into a select2 widget. However, when I attempt to convert the select element into a select2 usi ...

javascriptjqueryhtmlajax

Can you explain the purpose and functionality of this jQuery code snippet?

const elementsInBody = $("div", $("body")).length; This code snippet reminded me of something I saw in the qUnit documentation, and it's unlike anything I've encountered before. ...

jquery

Clear previously filtered items

I am currently working on implementing a search functionality using Javascript for my project, but I've hit a snag. After hiding certain items, I'm having trouble making them appear again. JSFiddle The code I have so far is as follows: $(' ...

javascriptjquery

What is the method to designate the initial value of a <select> tag within a React component?

I am working with a basic <select> element that is looping through a set of options: <select onChange={(event) => this.setState({selectedOption: event.target.value }) }> { this.state.options.map(option => <option key={option.label} ...

javascriptreactjsfrontend

Help needed with CSS menu dropdown problem

Hello everyone, I am currently working on creating a menu for the top navigation of my website. My goal is to have a list of items appear below the menu when hovering over it with the mouse. Right now, I am testing this on a local HTML file before impleme ...

htmlcss

The button is unable to contain all the text, causing it to spill out instead of wrapping to

Need help with creating an HTML button that opens a link. The button consists of a title and a short description, but when the description is too long, it overflows outside the button. Currently implementing bootstrap and jquery. Code: body { backgr ...

htmlcsstwitter-bootstrap-4

Strange behavior of Lambda function in Typescript

Within a larger class, I'm working with the following code snippet: array.map(seq => this.mFunction(seq)); After compiling using the tsc command, it becomes: array.map(function (seq) { return _this.mFunction(seq); }); Everything seems fine so f ...

javascriptnode.jstypescriptecmascript-5

Is it possible to store Socket.IO responses in a cache for quicker retrieval?

Consider this scenario where I have a websocket implementation shown below: let itemsArray = []; function fetchData() { itemsArray = await db.query(`SELECT * FROM Items`); } function emitData() { io.sockets.in("room_foo").emit("data", JSON.stringify ...

javascriptnode.jssocket.io

Prevent financial disagreement by utilizing jQuery carefully

While I'm sure this question has been asked in a similar form before, my searches for the $ sign did not return any results here. I have already built a large system and heavily utilized jQuery, using $ as a reference. Now, I don't want to rever ...

javascriptjqueryframeworksconflict

What is the best way to initiate a Post/Get Request to NodeJS without causing a page refresh?

Struggling to run a NodeJS function after clicking a button? You're not alone. Ajax requests haven't been working for me either when it comes to running NodeJS functions. I've got a bash script that generates a JSON file which I want to par ...

javascriptnode.jsajaxexpress

Change this npm script into a gulp task

I have a script in npm that I would like to convert into a gulp task. "scripts": { "lint": "eslint .", "start": "npm run build:sdk && node .", "posttest": "npm run lint && nsp check", "build:sdk": "./node_modules/.bin/lb- ...

javascriptnode.jsnpmgulp

Issue with Three.js GLTF loader peculiar behavior while attempting to incorporate three-dimensional text

I had an idea to import a prebuilt gltf scene created in Blender, then add some 3D text using the ttf loader and manipulate it. Each loader worked perfectly when used separately, but strange things started happening when I combined them into a single scrip ...

javascripthtmlthree.jsgltf