Flexbox can be incorporated with a slide down animation to create

Currently I am attempting to replicate the "slideUp" and "slideDown" features in jQuery while utilizing a flexbox for display!

jQuery.fn.toggleFlexbox = function() {
    var elm = $(this[0]);
    if(elm.css('display') === "none"){
        elm.css('display', '-webkit-flex');
    }else{
        elm.slideUp('fast');
    }
};

I have made some progress with this (the code above currently functions but does not slide when toggling from "none" to "-webkit-flex"). I attempted the following:

elm.animate({"display":"-webkit-flex"}, 1000);

Unfortunately, this approach did not work at all - no animation or error message.

The reason behind this effort is that I want all elements with the class "Settings" to load initially as display flex, then hide them using:

$('.settings').hide();

However, it seems that applying flexbox is not successful when I try to slide down the Settings section. Oddly enough, if I navigate to another page and return, everything works as intended... very strange!

Interestingly, I am unable to reproduce this issue in Fiddler.... http://jsfiddle.net/FzqA7/ ..

jqueryhtmlcssflexbox

Answer №1

It seems like you might be dealing with a similar issue to one I encountered in the past. Only half of the animation would work after it was initiated, for example, slideUp wouldn't work if slide down was already triggered and vice versa.

To solve this problem, I added a "return" statement after the first iteration of the animation, especially since it was triggered by a click event where ending the function was necessary for multiple scenarios.

You could try implementing the following code:


jQuery.fn.toggleFlexbox = function() {
    var elm = $(this[0]);
    if(elm.css('display') === "none"){
        elm.css('display', '-webkit-flex');
                return;
    } else {
        elm.slideUp('fast');
         return;
    }
};

I hope this helps clarify things for you. Let me know if I misunderstood your question!

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

Could you please ensure that the animation activates upon hovering over the "a" element?

Utilizing bootstrap, I have created the following code. I am looking to add functionality that triggers an animation upon mouseover of an img or a element, and stops the animation upon mouseleave. .progress-bar { animation: pr 2s infinite; } @keyfr ...

javascripthtmlcssbootstrap-4bootstrap-5

Utilizing a promise instead of making a jQuery ajax request

A scenario I am facing involves a function that is set to execute jquery.ajax and return it as a promise for future processing. However, in certain cases, the function possesses enough information to proceed synchronously without triggering the ajax call. ...

javascriptjqueryajaxpromise

Unable to find the desired match with Regex

I'm attempting to use a regex to replace content within brackets, but I'm encountering an unexpected result. This is the text I'm trying to target: Foo (bar) Below is the regex pattern I am using: /(?=\().*(?=\))/ My expectati ...

javascriptjqueryregexreplace

Video Autoplay within an image carousel - A seamless integration

I need assistance embedding a YouTube video as the fourth item in a slideshow on my website, www.serenitygardenrooms.com. The slideshow should play the first three images and then autoplay the video before moving on to the next image. However, the code sni ...

javascriptjquerycssyoutubeslideshow

Creating a Burger Navigation Menu with CSS and HTML using Image Overlapping

I'm encountering an issue with the new website I created for my local Church. I followed a tutorial on building a burger menu using just HTML and CSS, which you can view here. The problem arises when I attempt to place an image below the navigation m ...

htmlcss

Enhance the current menu item in WordPress by assigning a class to the anchor tag

function updateActiveClassOnMenu($item_output, $item, $depth, $args) { $menu_locations = get_nav_menu_locations(); if ($item->menu_order == 1){ $item_output = preg_replace('/<a /', '<a class="active" ', $item_o ...

phpjqueryhtmlcsswordpress

Craft a circular design with an Arc and a Pie using the DIV DOM element

After creating an ellipse using the div DOM element, here's how I did it: var body = document.querySelector('body'); var div = document.createElement('div'); div.style.borderRadius = '50%'; div.style.border = '1px s ...

javascripthtmlcss

jquery carousel slider dynamically append

I have been tasked with creating a dynamic carousel using jQuery AJAX, and my supervisor recommended that I utilize the .append() method. Below is the HTML code for my carousel: <div id="myCarousel"> </div> <div cla ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Intersecting interactions: Mouse events on flex boxes

I am facing a challenge in my React application where I have two panels with buttons displayed using flex properties. Below is a simplified version of the HTML/SCSS code that illustrates the setup: <div class="bottom-panel left"> <butt ...

css

Why is my CSS and Bootstrap full-page image not displaying properly?

I've been struggling to get a full-page image to display on my website and resize responsively across different screens. I've searched through w3schools and Stack Overflow for solutions, but no matter what I try, it just doesn't seem to work ...

htmlcssreactjsimage

Creating a Personalized Dropdown Menu Within the <div> Tag

My current task involves obtaining an element in the following format: https://i.sstatic.net/uhHkL.png Inside the nav-item, there is a dropdown with a top-centered triangle on it, and the dropdown is positioned at the center. Below is what I have achiev ...

htmlcssdrop-down-menubootstrap-4

Identify when objects in kineticJS are dropped

Key Concept Designing a match-the-following activity where red dots can be dragged to blue dots on the left. The draggable red dots must accurately match with the blue target dots. Objective Assigning values to each dot, and ensuring that once a red do ...

javascriptjqueryhtmlkineticjs

Having trouble with Laravel routes and jQuery $.post()? Keep getting a frustrating 404 Not Found error?

A JavaScript file with jQuery that is responsible for sending a POST request $.post('log_in', { email: email, password: password }, function(response) { $('#log_in_result').html(response); console.log(response); }); In the Lar ...

javascriptphpjquerylaravel-4

jQuery is implemented prior to the completion of HTML loading

Is there a way to ensure that HTML content loads before executing a JavaScript function? $(document).ready(function() { var x = 10; if(x == 10) { $('h1').text("Its changed !"); alert("Test"); } }) <h1>Hello< ...

javascriptjquery

Is there a way to incorporate HTML code into a fullCalendar 4 event title?

Is it possible to add HTML content to an event title using eventRender in FullCalendar version 4? document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new ...

javascriptjqueryfullcalendarfullcalendar-4

Any recommendations besides suggesting "g"? Let's brainstorm some other ideas for g!

Looking for some assistance with a mixin I wrote that seems to be causing a loop. Any suggestions on how to optimize the code or alternative methods to achieve the desired outcome? <div class='mh-60 pt-10'>dfgdfgsdfgsdf</div> ...

cssloopssass

Using Jquery to retrieve servlet session data

Having trouble displaying a div using servlet session attributes & JQuery. Explanation might be tricky without context. On the "result.jsp" page, there's a "Generate URL" link, an empty input text field, and an "addThis" div. When clicking on the lin ...

javajqueryajaxjspservlets

Update data dynamically on a div element using AngularJS controller and ng-repeat

I am currently navigating my way through Angular JS and expanding my knowledge on it. I have a div set up to load data from a JSON file upon startup using a controller with the following code, but now I am looking to refresh it whenever the JSON object cha ...

javascriptjqueryhtmljsonangularjs

Move the footer down to the bottom of the page

I'm struggling to create a footer that consistently stays at the bottom of the page, regardless of the amount of content on the page. I've tried following various tutorials but haven't had much success. I'm starting to think I must be d ...

javascriptjqueryhtmlcssfooter

Create a dynamic image positioned alongside text specifically designed for mobile devices

One of my challenges involves implementing a responsive image in Bootstrap (3.3.7): <div class="col-sm-2 text-center"> <img class="img-responsive center-block " src="img/1.png" style="max-width: <p>I would like to include some gua ...

csstwitter-bootstraplayout