Unable to achieve panel sliding out with jquery

I am attempting to achieve a sliding effect for the gray panel. My goal is to have the entire div (with a gray background) slide out when clicking on "target 1", "target 2", or "target 3" before the other colored panels slide in. Subsequently, when the user clicks on "main menu link", the entire colored panel should smoothly slide out (instead of blinking out) before the gray panel slides back in. Check out this demo for more information: http://jsfiddle.net/L7v0w96s/

<div class="main-menu"><a href="#target0" class="panel">Main Menu Link</a>
</div> 
<div id="right" id="main">
<div id="target0" class="panel active">This is the Target Menu<br />
    <a href="#target1" class="panel">Target 1</a><br/>
    <a href="#target2" class="panel">Target 2</a><br/>
    <a href="#target3" class="panel">Target 3</a><br/>
</div>
<div class="panel" id="target1" style="background:green">Target 1</div>
<div class="panel" id="target2" style="background:red">Target 2</div>
<div class="panel" id="target3" style="background:yellow">Target 3</div>
</div>
javascriptjqueryhtmlcss

Answer №1

http://jsfiddle.net/L7v0w96s/7/

To prevent your gray menu from being hidden too early, consider adding a callback function to the jQuery animate method. This will ensure that the menu is hidden only after the animation is complete.

  $other.each(function(index, self) {
       var $this = $(this);
        $this.animate({
            left: $this.innerWidth()
        }, 500, function() {
            $this.removeClass('active')
        });
  });

Also, remember to change "width()" to "innerWidth()" to calculate the width including paddings.

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

Issues arising when checking the responsiveness of the navigation bar on display

Recently, I encountered an issue with the navigation bar on my webpage. It contains an image logo on the left and three links on the right. The problem arises when I test the responsiveness using different devices on Chrome; the navigation bar resizes and ...

htmlcssresponsive-design

problem encountered when transferring data using ajax

I'm struggling with figuring out how to use an ajax function My goal is to send PHP variables via ajax to another page when a user clicks on a link Javascript function sendData(a, b, c, d) { $.ajax({ url: "page.php", typ ...

javascriptphpjqueryajax

The beauty of asynchronous GET requests in VueJS

As a newcomer to VueJS, I am exploring how to make a GET request to the GitHub API. Initially, I made a request to sort users by follower count, resulting in an array ordered in descending order of user logins. Following that, I sent another GET request to ...

javascriptvue.jshttpasynchronousaxios

Learn how to bypass the problem of self-signed certificates in request-promise

In my node application, I am utilizing the request-promise module to make API calls. You can find more information about it here. import request from 'request-promise'; let options = { method: GET, json: true, ...

javascriptnode.jsrequest-promise

Comparing the Calculation of CSS Selector Specificity: Class versus Elements [archived]

Closed. This question requires additional information for debugging purposes. It is not currently accepting answers. ...

htmlcssangular

Switch up the color of checkboxes with a dropdown menu option

I have an HTML dropdown code and I am trying to trigger a click event when a specific value is selected. Once this value is clicked, I want some checkboxes to change color. <select> <option value="calculate">calculate</option> ...

javascripthtmldrop-down-menu

The HTML grid is causing an irritating excess space on the right side of my website

After brainstorming an idea, I decided to create this website for testing purposes. However, the grid layout seems to be causing an unwanted margin on the right side of the page that is not associated with any HTML tag, disrupting the zoom functionality. ...

javascripthtmlcssmargin

Verify if the web application is in full-screen mode

Currently employing a meta tag to enable full-screen mode for a web app on iPad <meta name="apple-mobile-web-app-capable" content="yes"> Is there a method available to verify whether the app is indeed in full screen? The primary objective is to ad ...

htmliossafarimeta-tagsiphone-standalone-web-app

What are some strategies for ensuring that Plotly JS can adapt its height and width to fit the entire div dynamically, without relying on fixed pixel dimensions?

Is there a way to ensure that Plotly automatically adjusts to the size of the container #myDiv without any noticeable delay when the top button is clicked? This code snippet demonstrates a high delay: var z = [], steps = [], i; for (i = 0; i < 500; i+ ...

javascripthtmlcssplotlyplotly.js

storing negative floating point numbers in an array using regular expressions in JavaScript

I am currently working on creating a regular expression that can detect both positive and negative floating point numbers of any length. My goal is to store the captured values in an array as double data type. I have attempted the following pattern: input ...

javascript

Using jQuery to modify the CSS of a div located outside of an iframe

Currently, I am developing a straightforward script. Firstly, here is all of the code that I have: <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript"> function SuperWebF1() { $("#outerd ...

javascriptjqueryhtmlcssiframe

Automatically refresh the D3 Sunburst visualization when the source json is modified (items added or removed)

I'm a beginner in D3 and I'm attempting to update the chart dynamically if the source JSON is modified. However, I'm facing difficulties in achieving this. Feel free to check out this plunkr Js: var width = 500, height = 500, radi ...

javascriptjqueryjsond3.jssunburst-diagram

How can I create a Material ui Card with a border-less design?

After reviewing the information provided, I noticed that you can set the option to have it as variant="outlined" or raised However, I am curious if there is a method to create the card without any visible borders at all? ...

javascriptreactjsmaterial-ui

Having trouble getting data to send to node.js server using $.ajax post

Trying to convert a table date into an array and send it to the server side using Ajax post for the first time. Despite following all the suggestions in previous posts, I am still struggling. Utilizing body-parser to extract data on the server side. Any he ...

javascriptnode.jsajaxbody-parser

Having trouble with my intricate-box and grid layout - the images are all overlapping!

Could you please take a look at the image below and tell me what I might be doing incorrectly? When the page initially loads, pictures appear like this. However, if I refresh the page, the issue is resolved. https://i.sstatic.net/hIyA4.jpg If I remove th ...

htmlcssbootstrap-4fancybox-3

Find the location where the function is declared

Can anyone help me locate the definition of this function: http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#copyObject-property copyObject(params = {}, callback) ⇒ AWS.Request I'm struggling to find where it is defined. Any suggestio ...

javascriptnode.jsamazon-web-servicesamazon-s3proxyquire

Steps to utilize a PHP include for displaying HTML content corresponding to the URL file name

I am currently working on a PHP script that utilizes PHP include to insert HTML content based on the filename from the URL. For instance, with the use of PHP include: - if the filename in the URL is dog.html, it will display dog within the HTML document. ...

phphtml

Creating an attention-grabbing alert bar positioned above the menu

When I attempted to add this alert bar to my website, I encountered an issue where it was being hidden behind my menu. Some sources suggest that using z-index and position:absolute can resolve this problem by positioning one element above the other, but th ...

htmlcssmenustyles

How can I apply CSS properties to a div class by targeting another child div class?

When the div class dhx_list_item dhx_list_day_events_item is present, I need to apply the following CSS: .dhx_view .day_events .dhx_scroll_cont:first-of-type:before { //some code here } Please see the attachment for reference. ...

htmlcss

The 'npm start' command is failing to recognize the changes made to the

I am embarking on a new node application journey, starting with the package.json below, which is quite basic. { "name": "mynewnodeventure", "version": "1.0.1", "description": "Exploring node", "main": "index.js", "start": "node server. ...

javascriptnode.jsjson