Combine Slide and Fade Functions

Dor

# March 18, 2010

As if you read my thoughts. Thanks Chris :D

Reply

Tofudisan

# March 18, 2010

This is beautiful! I can imagine using this effect on many things.

Thanks!

Reply

Nightmaster

# May 30, 2010

Any demo? I would like to see it if there is some.

Reply

Steviss

# June 12, 2010

Thanks, m8! Your site is great! Found a lot of usefull tips!

Reply

El garch Hicham

# February 28, 2011

Hello, is there any Demo to download, it doesn’t work for me.
thx for the nice post.

Reply

Amir Monfared

# February 15, 2012

it’s nice , but I think it would be better if there was a demo page just like “Downloads”

Reply

Rob Salaman

# May 14, 2012

This is an awesome post Chris cheers.

Reply

miyijura

# June 29, 2012

Excellent effect and very easy to modify!
Thanks!

Reply

zing

# August 15, 2012

Always nice to see a demo or example.

Reply

JeyKeu

# December 27, 2012

Thanks @Chris.

@Amir Monfared: there you go, http://jsfiddle.net/jeykeu/ejcn8/

Reply

jake

# April 18, 2013

Thanks once again Chris. Over & over again I find what I’m looking for through your site.

Reply

Kalrav Bhatnagar

# October 9, 2013

Thanks a lot Chris! Nice work

Reply

Frederik

# June 11, 2014

Nice one, just in case someone else wants to use this:

You might want to add padding: 'toggle' in order to prevent a jumpy animation when you’re using paddings on the element you want to toggle.

Reply

Nithin

# July 4, 2014

Check out the working demo here

http://codepen.io/np24/pen/biqtE

Thanks,
Nithin

Reply

Andy Fleming

# August 17, 2014

Here are the corresponding functions for explicitly “slide-fading” in or out.

$.fn.slideFadeToggle  = function(speed, easing, callback) {
    return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
};

$.fn.slideFadeIn  = function(speed, easing, callback) {
    return this.animate({opacity: 'show', height: 'show'}, speed, easing, callback);
};

$.fn.slideFadeOut  = function(speed, easing, callback) {
    return this.animate({opacity: 'hide', height: 'hide'}, speed, easing, callback);
};

Reply

Corry Frydlewicz

# January 20, 2015

Hey Guys,
If I want this to toggle between display: none and display: flex with all the proper compatibility, is that possible? Or should I just create a new element within to display: flex ?

Reply

Paul Revival

Permalink to comment# August 25, 2015

It’ll be better to wrap your ‘flex’-element to another one with display:block and use this function on it.

Loading...

Vinny

# November 23, 2015

This is better achieved in css;

CSS:

.slide {
position: relative;
left: 50%;
height: 20px;
animation: 5s slide;
}

@keyframes slide {
from: { left: 100%; opacity: 0; }
to: { left: 50%; opacity: 1; }
}

Reply

gokul

# September 13, 2016

submenu……….

$(document).ready(function () {
                $('.parent').on("click", function () {
                    $(this).find('li:first a').addClass('');
                    $(this).find('li:first').addClass('');
                    $('li a').removeClass('sel1');
                    $('li').removeClass('seler');
                    $(this).find(".sub-nav1").fadeToggle("slow");
                    $(this).siblings().find(".sub-nav1").hide();

               if ($(".sub-nav1:visible").length === 0) {
                    $("#menu-overlay").hide();
                    $(this).find('li:first a').removeClass('sel1');
                    $(this).find('li:first').removeClass('seler');
                } else {
                    $("#menu-overlay").show();
                    $('ul.sub-nav1 li a').addClass('mar');
                    $('ul.sub-nav1 li a').addClass('selcol');
                    $(this).find('li:first a').addClass('sel1');
                    $(this).find('li:first').addClass('seler');
                    // $(this).find('ul').slideToggle();
                }
            });

Usage

Comments

Leave a Reply Cancel reply