animowany efekt dla fadein/fadeout użyciu jQuery

Question

Aby zrozumieć mój kod odwiedź tę stronę:

Proszę kliknąć na pierwszej

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

Jest to uproszczona metoda animowany filtrowanie filtrem opakowań.

Każde czerwone pole może mieć więcej niż jedną klasę jako identyfikator filtra. Moim celem przy pomocy tego kodu jest uzyskanie dobrego animowanego sposobu na zanikanie i zanikanie. Na razie udało mi się to zrobić tylko po zaniknięcie.

Mimo że napisałem animację do zanikania, nie mogę jej poprawnie użyć w kodzie JS.

Przykład dla 1 filtra: Chcę, aby wszystkie klasy z wyjątkiem "opakowania" ładnie zanikały i zawierały klasę pakowania.

kod jQuery

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

próbuje użyć animacji Fade-in (nie powiodło się)

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

Jak mogę poprawić ten kod?

Answer 1

mam zaktualizowane przykład. http://codepen.io/jammer99/pen/mEQabN Zasadniczo trzeba ustawić fadeout zakończyć w ciągu 0 sekund mocno, dodatkowo skoro już używany css wygenerować animację, należy użyć hide() i show() zamiast fadeOut() i fadeIn()

tutaj jest zaktualizowany kod

$(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: Tu jest aktualizowana kod. 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

Dla przykładu filtra 1, mówisz, że chcesz, aby "opakowanie" było jedynym, które nie zanika, ale czy "opakowanie" zniknie, nawet jeśli nie zniknęło?

zamierzam zakładać, że chcesz wszystko zgaśnie, wtedy „opakowanie” Fade In. Można to zrobić poprzez wywołanie fadeIn dla „opakowania” wewnątrz wywołania zwrotnego, gdy fadeOut.all.

Edit:

Więc funkcja fadeOut zajmuje zwrotnego zakończeniu, funkcję, która będzie uruchamiana po zakończeniu animacji fadeOut. Trzeba tylko przejść w anonimowej funkcji parametru fadeOut, a wewnątrz tej funkcji, co chcesz robić po zakończeniu animacji:

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

Answer 3

Zasadniczo Twój css i js animacje są starcia. Powinieneś prawdopodobnie trzymać się jednego lub drugiego. Również obie animacje js działają w tym samym czasie: fadeIn i fadeOut.

Opcją jest poczekanie do zakończenia animacji fadeOut przed rozpoczęciem animacji fadeIn. Możesz to zrobić z limitem czasu.

W poniższym przykładzie funkcja hideThenShow czeka aż animacja fadeOut (500ms) następnie uruchomi fadeIn na wybranych elementach.

Jako bonus można przeglądać filtry i elementy listy zamiast powtarzać funkcję hideThenShow w tym przykładzie.

Nadzieja pomaga

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>