Kombiniere Slide- und Fade-Funktionen

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

Verwendung

$("#something").click(function() {
   $(this).slideFadeToggle();
});

Kommentare

Dor

# 18. März 2010

Als ob du meine Gedanken gelesen hättest. Danke Chris :D

Antworten

Tofudisan

# 18. März 2010

Das ist wunderschön! Ich kann mir vorstellen, diesen Effekt für viele Dinge zu verwenden.

Danke!

Antworten

Nightmaster

# 30. Mai 2010

Gibt es eine Demo? Ich würde sie gerne sehen, wenn es eine gibt.

Antworten

Steviss

# 12. Juni 2010

Danke, Kumpel! Deine Seite ist großartig! Habe viele nützliche Tipps gefunden!

Antworten

El garch Hicham

# 28. Februar 2011

Hallo, gibt es eine Demo zum Download? Es funktioniert bei mir nicht.
Danke für den schönen Beitrag.

Antworten

Amir Monfared

# 15. Februar 2012

Es ist schön, aber ich denke, es wäre besser, wenn es eine Demoseite gäbe, genau wie bei „Downloads“.

Antworten

Rob Salaman

# 14. Mai 2012

Das ist ein großartiger Beitrag, Chris, danke.

Antworten

miyijura

# 29. Juni 2012

Ausgezeichneter Effekt und sehr einfach zu modifizieren!
Danke!

Antworten

zing

# 15. August 2012

Es ist immer schön, eine Demo oder ein Beispiel zu sehen.

Antworten

JeyKeu

# 27. Dezember 2012

Danke @Chris.

@Amir Monfared: Hier ist sie, http://jsfiddle.net/jeykeu/ejcn8/

Antworten

jake

# 18. April 2013

Nochmals vielen Dank, Chris. Immer und immer wieder finde ich das, wonach ich suche, auf deiner Seite.

Antworten

Kalrav Bhatnagar

# 9. Oktober 2013

Vielen Dank, Chris! Tolle Arbeit

Antworten

Frederik

# 11. Juni 2014

Gute Sache, nur für den Fall, dass jemand anderes dies verwenden möchte

Sie möchten vielleicht padding: 'toggle' hinzufügen, um eine ruckartige Animation zu vermeiden, wenn Sie Abstände für das Element verwenden, das Sie umschalten möchten.

Antworten

Nithin

# 4. Juli 2014

Schauen Sie sich die funktionierende Demo hier an

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

Vielen Dank,
Nithin

Antworten

Andy Fleming

# 17. August 2014

Hier sind die entsprechenden Funktionen für das explizite „Slide-Fading“ ein- oder aus.

$.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);
};

Antworten

Corry Frydlewicz

# 20. Januar 2015

Hallo Leute,
Wenn ich möchte, dass dies zwischen `display: none` und `display: flex` mit voller Kompatibilität umgeschaltet wird, ist das möglich? Oder sollte ich einfach ein neues Element im Inneren erstellen, um auf `display: flex` zu setzen?

Antworten

Paul Revival

Permalink zum Kommentar# 25. August 2015

Es ist besser, Ihr „Flex“-Element in ein anderes mit `display:block` zu verpacken und diese Funktion darauf anzuwenden.

Vinny

# 23. November 2015

Das wird besser in CSS erreicht;

CSS

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

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

Antworten

gokul

# 13. September 2016

Untermenü………. .

$(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();
                }
            });

Antworten

pratik

# 12. Februar 2019

Wie kann man das in `slideUp` umwandeln?

Antworten

Verwendung

Kommentare

Hinterlasse eine Antwort Antwort abbrechen