animierten Effekt für FadeIn/fadeout mit jQuery

Question

Um meinen Code verstehen Sie bitte diese Seite besuchen:

Bitte klicken Sie Verpackungs Filter zuerst

http://codepen.io/mariomez/pen/qNrzAr?editors=0010

Es ist eine vereinfachte animierte Filterverfahren.

Jede rote Box kann mehr als eine Klasse als Kennung für den Filter haben. Mein Ziel mit diesem Code ist es, einen schönen animierten Weg zum Einblenden und zum Ausblenden zu erhalten. Bisher habe ich das nur zum Einblenden gemacht.

Obwohl ich die Animation für Fade-Out geschrieben habe, kann ich es nicht richtig im JS-Code verwenden.

Beispiel für 1 Filter: Ich möchte, dass alle Klassen außer "Verpackung" schön ausgeblendet werden und die Verpackungsklasse einblendet haben.

jQuery CODE

$(document).ready(function(){ 
    $(".filter-logo").click(function(){ 
     $(".all").fadeOut(normal,addClass('animated fadeOutEffect')); 
     $(".logo").fadeIn(normal,addClass('animated fadeInEffect')); 
    }); 
    $(".filter-website").click(function(){ 
     $(".all").fadeOut(); 
     $(".website").fadeIn().addClass('animated fadeInEffect'); 
    }); 

    $(".filter-packaging").click(function(){ 
     $(".all").fadeOut(); 
     $(".packaging").fadeIn().addClass('animated fadeInEffect'); 
    }); 

    $(".filter-forsale").click(function(){ 
     $(".all").fadeOut(); 
     $(".forsale").fadeIn().addClass('animated fadeInEffect'); 
    }); 

    $(".filter-all").click(function(){ 
     $(".all").fadeOut(); 
     $(".logo, .website, .packaging, .forsale, .all").fadeIn().addClass('animated fadeInEffect'); 
    }); 
}); 

Der Versuch, die Fade-In-Animation zu verwenden: (FAILED)

$(".all").not('.packaging').fadeOut().addClass('animated fadeOutEffect'); 
     $(".packaging").fadeIn().addClass('animated fadeInEffect'); 
    }); 

Wie ich diesen Code verbessern?

Answer 1

hilft ich dein Beispiel aktualisiert haben. http://codepen.io/jammer99/pen/mEQabN Im Wesentlichen müssen Sie fadeout einstellen gewaltsam innerhalb von 0 Sekunden beenden, zusätzlich, da Sie bereits CSS verwendet haben, um die Animation zu erzeugen, Sie hide() und show() statt fadeOut() und fadeIn()

hier ist der aktualisierte Code

verwenden sollten

$(document).ready(function() { 
     $(".all").each(function() { 
     $(this).addClass("animated") 
     }) 
     $(".filter-logo").click(function(e) { 
     e.preventDefault(); 
     $(".all").removeClass('fadeInEffect').addClass("fadeOutEffect").hide(0); 
     $(".logo").show(0).removeClass("fadeOutEffect").addClass('fadeInEffect'); 
     }); 

     $(".filter-website").click(function(e) { 
     e.preventDefault(); 
     $(".all").removeClass('fadeInEffect').addClass("fadeOutEffect").hide(0) 
     $(".website").show(0).removeClass("fadeOutEffect").addClass('fadeInEffect'); 
     }); 

     // UPDATE CODE - START //////////// 
     $(".filter-packaging").click(function(e) { 
     e.preventDefault(); 
     $(".all").removeClass('fadeInEffect').addClass("fadeOutEffect").hide(0); 
     $(".packaging").show(0).removeClass("fadeOutEffect").addClass('fadeInEffect'); 

     }); 
     // UPDATE CODE - END //////////// 

     $(".filter-forsale").click(function(e) { 
     e.preventDefault(); 
     $(".all").removeClass('fadeInEffect').addClass("fadeOutEffect").hide(0); 
     $(".forsale").show(0).removeClass("fadeOutEffect").addClass('fadeInEffect'); 
     }); 

     $(".filter-all").click(function(e) { 
     e.preventDefault(); 
     $(".all").removeClass('fadeOutEffect').addClass("fadeInEffect").show(0) 
     }); 
    }); 

---

EDIT: Hier wird aktualisierten Code. http://codepen.io/jammer99/pen/mEQabN?editors=0010

$(document).ready(function() { 
    $(".all").each(function() { 
    $(this).addClass("animated") 
    }) 
    $(".filter-logo").click(function(e) { 
    e.preventDefault(); 
    $(".all").removeClass('fadeInEffect').addClass("fadeOutEffect") 
    setTimeout(function() { 
     $(".all").hide(0) 
     $(".logo").stop().show(0).removeClass("fadeOutEffect").addClass('fadeInEffect'); 
    }, 500); 
    }); 

    $(".filter-website").click(function(e) { 
    e.preventDefault(); 
    $(".all").removeClass('fadeInEffect').addClass("fadeOutEffect") 
    setTimeout(function() { 
     $(".all").hide(0) 
     $(".website").stop().show(0).removeClass("fadeOutEffect").addClass('fadeInEffect'); 
    }, 500); 
    }); 

    $(".filter-packaging").click(function(e) { 
    e.preventDefault(); 
    $(".all").removeClass('fadeInEffect').addClass("fadeOutEffect") 
    setTimeout(function() { 
     $(".all").hide(0) 
     $(".packaging").stop().show(0).removeClass("fadeOutEffect").addClass('fadeInEffect'); 
    }, 500); 
    }); 

    $(".filter-forsale").click(function(e) { 
    e.preventDefault(); 
    $(".all").removeClass('fadeInEffect').addClass("fadeOutEffect") 
    setTimeout(function() { 
     $(".all").hide(0) 
     $(".forsale").stop().show(0).removeClass("fadeOutEffect").addClass('fadeInEffect'); 
    }, 500); 
    }); 

    $(".filter-all").click(function(e) { 
    e.preventDefault(); 

    $(".all").removeClass('fadeInEffect').addClass("fadeOutEffect") 
    setTimeout(function() { 
     $(".all").show(0).removeClass("fadeOutEffect").addClass('fadeInEffect'); 
    }, 500); 
    }); 
}); 

Answer 2

Für Ihr Beispiel für 1 Filter, Sie sagen, Sie wollen "Verpackung", die einzige, die nicht ausbleichen, aber dann "Verpackung" verblassen, auch wenn es nicht ausgeblendet?

Ich werde dir alles verblassen zu übernehmen wollen, dann in „Verpackung“ fade haben. Sie können durch den Aufruf der fadeIn für „Verpackung“ in einem Rückruf, wenn Sie fadeOut.all so tun.

Edit:

So ist die fadeOut Funktion nimmt einen Abschluss Rückruf, eine Funktion, die ausgeführt wird, nachdem die fadeOut Animation abgeschlossen ist. Sie müssen nur in einer anonymen Funktion zum fadeOut Parameter zu übergeben, und innerhalb dieser Funktion tun, was Sie tun wollen, nachdem die Animation beendet:

$(".filter-packaging").click(function(){ 
    $(".all").fadeOut(function() { 
     $(".packaging").fadeIn().addClass('animated fadeInEffect'); 
    }); 
}); 

Answer 3

Grundsätzlich Ihre css und js Animationen clashing. Sie sollten wahrscheinlich bei dem einen oder anderen bleiben. Außerdem laufen beide js Animationen gleichzeitig fadeIn und fadeOut.

Eine Option ist zu warten, bis die fadeOut Animation endet, bevor Sie die fadeIn Animation starten. Sie können dies mit einer Zeitüberschreitung tun.

Im folgenden Beispiel wartet die Funktion hideThenShow bis die fadeOut Animation (500ms) dann die fadeIn auf den ausgewählten Elementen ausführt.

Als Bonus könnten Sie Ihre Filter und Ihre Listenelemente durchlaufen, anstatt die hideThenShow Funktion im Beispiel zu wiederholen.

Hope it

function hideThenShow($clickedElement, $elementsToShow){ 
 
    var duration = 500; 
 
    $clickedElement.click(function(){ 
 
    $('.all').fadeOut(duration); 
 
    setTimeout(function(){ 
 
     $elementsToShow.fadeIn(); 
 
    },duration); 
 
    }); 
 
} 
 

 
$(document).ready(function(){ 
 

 
    var filterLogo  = $(".filter-logo"); 
 
    var filterWebsite  = $(".filter-website"); 
 
    var filterPackaging = $('.filter-packaging'); 
 
    var filterForsale  = $('.filter-forsale'); 
 
    var filterAll   = $(".filter-all"); 
 
    var websiteElemetns = $('.website'); 
 
    var logoElements  = $(".logo"); 
 
    var packagingElements = $('.packaging');  
 
    var forsaleElements = $('.forsale'); 
 
    var allElements  = $(".all"); 
 
    
 
    hideThenShow(filterLogo, logoElements); 
 
    hideThenShow(filterWebsite, websiteElemetns); 
 
    hideThenShow(filterPackaging, packagingElements); 
 
    hideThenShow(filterForsale, forsaleElements); 
 
    hideThenShow(filterAll, allElements); 
 
    
 
});

.ullist li {width:100px;background:#f00; height:100px; display:block; float:left;clear:none; margin:25px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="secmenu"> 
 
\t <ul> 
 
     <a href="#" class="filter-all"><li>All</li></a> 
 
     <a href="#" class="filter-logo"><li>Logo</li></a> 
 
     <a href="#" class="filter-website"><li>Website</li></a> 
 
     <a href="#" class="filter-packaging"><li>Packaging</li></a> 
 
     <a href="#" class="filter-forsale"><li>For sale</li></a> 
 
</ul> 
 
</div> 
 

 

 
    <ul class="ullist"> 
 
<li class="website all">text</li> 
 
<li class="website all">text</li> 
 
<li class="website all">text</li> 
 
<li class="packaging all">text</li> 
 
<li class="packaging all">text</li> 
 
<li class="logo all">text</li> 
 
<li class="logo all">text</li> 
 
<li class="logo all">text</li> 
 
<li class="logo all">text</li> 
 
<li class="logo all">text</li> 
 
<li class="forsale all">text</li> 
 
    
 
</ul>