Issue with sliding out in jQuery

Facing a problem with my jQuery animations. Successfully implemented the slide in effect for my flex sidebars, but struggling with the slide out effects. The slide out function is causing the sidebars to vanish instantly.

I think I need to incorporate the hide() and show() functions because using just min/max-width results in the sidebars making the flex canvas too tall.

Here are my slide out functions:

  $('#close-left').click(function(event){
        $('#left').animate({
            'min-width': '0px',
            'max-width': '0px',
        }, 1250).hide();

    });

    $('#close-right').click(function(event){
        $('#right').animate({
            'min-width': '0px',
            'max-width': '0px',
        }, 1250).hide();
    });

Created a demo on Fiddle demonstrating the same issues: https://jsfiddle.net/89s5tsLr/

Update: Also included another Fiddle showcasing how the right sidebar causes the flex canvas to become excessively tall without implementing the hide() function. https://jsfiddle.net/soq6webp/1/

Appreciate any assistance provided =)

Answer №1

get rid of the .hide()

This will immediately cause them to vanish and disrupt your animation.

-- EDIT: After our discussion in the comments, I realized that considering your situation, you may not be able to execute your original plan. Instead, you can:

  • Begin with a sliding out animation
  • Then reveal the content

        $('#right').show().animate({ css to change here }, {
        duration: 1250,
        complete: function() {
            // once animation is over, run all the code in this block
        }
    

Take a look at this JsFiddle

The second object passed to an animate function is options and one of these is complete which calls the code once the animation is finished.

Therefore, we animate the text within this anonymous function so it's triggered after the animation on the #right div concludes.

We apply the same approach to the close button, except we first conceal our text, then slide away the div.

(notice the alterations in the CSS as well)

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

Center the code within the h2 heading

Here in this demonstration (bootply link): <h2>Title <small><code>one line</code></small></h2> I am attempting to vertically center the code element with the title. Despite trying to apply vertical-align: middle to the ...

When a cookie is set in NextJS with a static export, it reverts back to its original

My current project involves building a multilingual website. To handle language selection, I have implemented a system where the chosen language is stored in a cookie and retrieved using getInitialProps in the _app file, which is then passed as a context A ...

Is it possible to limit the values of parameters with react-router?

Currently, I am in the process of developing a website using react and react-router. I have two different types of routes set up, as shown below: <Route name="products" path="/:type/*" handler={ ProductList } /> <Route name="generic-template" p ...

Tips on how to properly display the date in v-Calendar

I'm struggling to format the date output from the v-calendar. Currently, it appears like: Fri Jul 31 2020 00:00:00 GMT+0200 (utc summertime) However, I would like it to display as 2020-07-28. I have searched through the documentation but couldn' ...

How can I use CSS to customize the appearance of the elements within an iframe?

<iframe src="#link"> #document <!doctype html> <html> ... </html> </iframe> Is there a way to customize the styling of elements within the #document using CSS only, without needing to use Jquery? ...

What could be the reason for 'selected' not appearing?

Can anyone explain why the 'selected' attribute is not appearing in my <option value=""> element? <p> <select name="images" class="dropdown"> <option value="empty" <?php if(isset($_GET[ ...

Transmit data to PHP servers

When the button in my HTML is clicked, it should trigger a query in a PHP file that will display the results. However, the button does not seem to be working as expected. What could be causing this issue? Here is the code I have tried: <?php $reply_ ...

Failure to load complete set of data in JQGrid

The issue I'm facing is that I cannot bind all rows in my JQgrid. It seems to only bind 2272 rows even though I have tried using the maxJsonLength option. Unfortunately, it still doesn't display all of the data. ...

Utilizing ng-repeat Loop Variable in ng-include Content within Angular Framework

I am looking to create two tables with identical record structures. One table will serve as the Main table, while the other will act as an Archive. Each record is represented by bootstrap divs with col-sm-x structure containing details such as {{rec.Name}} ...

No success with ajax following the execution of a php script

Utilizing a php-script, I am able to execute a database backup of my website with the simple click of a button on the admin-panel. To enhance user experience, I want to display real-time updates in the admin-panel during the backup process, indicating whe ...

Creating a Custom FlatList Content Container with React Native

Is it possible to customize FlatList items with a custom component? I want to create a setup where my FlatList items are encapsulated within a custom component similar to the following: <ScrollView pt={8} px={16} pb={128} > <Card e ...

Improving the efficiency of rendering multiple objects on a canvas

I'm currently working on developing a simulation for ants using the basic Javascript canvas renderer. Here is a snippet of the rendering code: render(simulation) { let ctx = this.ctx; // Clearing previous frame ctx.clearRect(0, ...

The "placeholder" attribute effectively populates the form input in HTML, but when using Angular 2+, the "value" attribute does not fill the input field as expected

Within my Angular UI, I have implemented an edit button that allows users to transform a member's name heading into a form for editing and updating the name. The challenge lies in ensuring that the form is pre-filled with the current name. My issue a ...

Could the `<script src="show.js"></script>` code pose a threat?

Upon delivering a webpage, a software engineer included the subsequent line of code towards the end: <script src="show.js"></script> We are uncertain if adding this code to our webpage poses any risks. What could be the legitimate reason behi ...

My code is currently experiencing issues with jQuery

Here is the markup that I am using; <tbody> <tr> <td class="expand">Showroom area - New Display Zone</td> <td>300</td> <td>350</td> <td class="short ...

Patience is key: techniques for real-time variable updates and calculations in JavaScript

Hi, I am currently working on creating a dashboard to calculate the total outstanding amount for my medicine suppliers using Next.js. Below is the code snippet for my "createPurchase" API: import PurchaseOrder from '../../models/PurchaseOrder' ...

When styled with an id, the DIV element does not inherit styles from a CSS class

I seem to be facing an issue with the code below, possibly due to using both class and id in the same div. Despite knowing they are meant to work together. For more information: Can I use DIV class and ID together in CSS? .PB { position: relative; ...

I am facing issues with utilizing if endif for my Internet Explorer stylesheet in HTML/CSS

<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]--> <link rel="StyleSheet" href="style.css" /> Whenever I apply this code, the content in Internet Explorer is being influenced by both style.css and ie. ...

Encountering Key-Value Pair Errors While Executing the BrowserStack Options App

Using node v14.17.1 (npm v6.14.13), Cucumber/BDD. The Package.json file contains the following dependencies. ////////// "devDependencies": { "@types/react": "^17.0.11", "@wdio/appium-service": "^7.7.3&q ...

How do I create a button that triggers function1 when held for two seconds, but if held for less than two seconds, triggers function2 instead

The button on my device is not functioning properly when I try to hold it for a certain period of time (it acts as if it's being clicked instead). I attempted to implement a feature where if the button is held down for 2 seconds or more, callfunction ...