анимационный эффект для FadeIn/FADEOUT с помощью JQuery

Question

Чтобы понять мой код, пожалуйста, посетите эту страницу:

Пожалуйста, нажмите на упаковке фильтра первой

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

Это упрощенная анимированный метод фильтрации.

Каждый красный ящик может иметь более одного класса в качестве идентификатора фильтра. Моя цель с помощью этого кода состоит в том, чтобы добиться приятного анимированного способа для постепенного и постепенного исчезновения. На данный момент мне удалось сделать это только для постепенного затухания.

Несмотря на то, что я написал анимацию для постепенного исчезновения, я не могу правильно ее использовать в JS-коде.

Пример для 1 фильтра: Я хочу, чтобы все классы, за исключением «упаковки», красиво исчезали и имели упаковочный класс.

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

Попытка использовать перепыла в анимации: (FAILED)

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

Как можно улучшить этот код?

Answer 1

Я обновил свой пример. http://codepen.io/jammer99/pen/mEQabN По сути вы должны установить FadeOut закончить в течение 0 секунд с силой, кроме того, так как вы уже использовали CSS для создания анимации, вы должны использовать hide() и show() вместо fadeOut() и fadeIn()

вот обновленный код

$(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: Вот обновленный код. 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

Для вашего примера для 1 фильтра вы говорите, что хотите, чтобы «упаковка» была единственной, которая не исчезла, но затем «упаковка» исчезает, хотя она не исчезает?

Я предполагаю, что вы хотите, чтобы все затухать, то есть «упаковки» замирание. Вы можете сделать это, позвонив в fadeIn для «упаковки» внутри обратного вызова, когда вы fadeOut.all.

Edit:

Так функция fadeOut принимает завершения обратного вызова, функцию, которая будет выполняться после того, как fadeOut анимация завершается. Вам просто нужно передать в анонимной функции с параметром fadeOut, и внутри этой функции делать то, что вы хотите сделать после того, как анимация завершается:

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

Answer 3

В основном ваш CSS и JS анимация конфликтующие. Вероятно, вы должны придерживаться того или другого. Также обе анимации js работают одновременно fadeIn и fadeOut.

Опция должна дождаться окончания анимации fadeOut перед началом анимации fadeIn. Вы можете сделать это с тайм-аутом.

В приведенном ниже примере функция hideThenShow ждет, пока анимация fadeOut (500 мс) не запустит fadeIn по выбранным элементам.

В качестве бонуса вы можете прокручивать фильтры и элементы списка вместо повторения функции hideThenShow в примере.

Надеется, что это помогает

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>