在fadeIn前添加fadeOut

使用此腳本來過濾基於類的元素。目前它停止以前的功能並淡入新類。在fadeIn前添加fadeOut

基本上我需要在開始淡入淡出之前淡出所有的選擇。目前這是一個從100％不透明度到開始漸變選擇器的銳減，並且我想順利淡出當前（或特定類別），然後在此淡出。

我的代碼：

$('div.tags').delegate('input[type=radio]', 'change', update); 
 
    update(); 
 
    function update() { 
 
     var $lis = $('.results > div'), 
 
      $checked = $('input:checked'); 
 
     if ($checked.length) { 
 
      var selector = $checked.map(function() { 
 
       return '.' + $(this).attr('rel'); 
 
      }).get().join(''); 
 
    
 
      $lis.hide().filter(selector).stop().fadeIn(1000, 'easeInCirc'); 
 
    
 
     } else { 
 
      $lis.stop().fadeIn(1000, 'easeInCirc'); 
 
     } 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tags"> 
 
     <label class="odseba"> 
 
     <input class="fadeout" type="radio" checked="checked" rel="all" name="gg" /><span>VŠETKO</span></label> 
 
     <label class="odseba"> 
 
     <input type="radio" rel="web" name="gg" /><span>WEB</span></label> 
 
     <label class="odseba"> 
 
     <input type="radio" rel="eshop" name="gg" /><span>ESHOP</span></label> 
 
     <label class="odseba"> 
 
     <input type="radio" rel="seo" name="gg" /><span>SEO</span></label> 
 
     <label class="odseba"> 
 
     <input type="radio" rel="grafika" name="gg" /><span>GRAFIKA</span></label> 
 
     <label class="odseba"> 
 
     <input type="radio" rel="logo" name="gg" /><span>LOGO</span></label> 
 
     <label class="odseba"> 
 
     <input type="radio" rel="reklama" name="gg" /><span>REKLAMA</span></label> 
 
     <label class="odseba"> 
 
     <input type="radio" rel="kampan" name="gg" /><span>KAMPAŇ</span></label> 
 
     <label class="odseba"> 
 
     <input type="radio" rel="branding" name="gg" /><span>BRANDING</span></label> 
 
     <label class="odseba"> 
 
     <input type="radio" rel="print" name="gg" /><span>PRINT</span></label> 
 
     </div> 
 

 
and these are idems being filtered: 
 

 
    <div class="span4 thumb-pad0 all web eshop print seo"> 
 
     <div class="thumbnail"> 
 
      <figure><a href="img/img5.jpg"><img src="img/page3_pic5.jpg" alt=""></a></figure> 
 
      <div class="caption"> 
 
       <h2 style="font:28px/28px 'Century Gothic', 'Century Gothic', Arial, Helvetica, Century Gothic; color:#FFF; text-transform:uppercase; margin:0;">Name</h2> 
 
       <p>lorem ipsum</p> 
 
      </div> 
 
     </div> 
 
    </div>

來源

2016-09-21 Martin Sprušanský

傳遞淡入（）作爲回調的淡出（）：

} else { 
    $("elements-to-fade-out").fadeOut(1000, "easeInCirc", function() { 
     $lis.stop().fadeIn(1000, 'easeInCirc'); 
    }); 
}

你也可以這樣做：

} else { 
    $("elements-to-fade-out").fadeOut(1000, "easeInCirc"); 

    // Fade in after 1000 
    // 
    setTimeout(function() { 
     $lis.stop().fadeIn(1000, "easeInCirc"); 
    }, 1000); 
}

在這裏看到的信息在回調：

http://www.w3schools.com/jquery/eff_fadein.asp

來源

2016-09-21 12:16:16 Nunchy

在停止時工作我做到了這一點：/ –

顯然你需要將fadeOut（）的選擇器更改爲想要應用淡入淡出的任何元素。此外，「緩和」不是一個實際的選擇......只是一個佔位符，我不知道你想要什麼，具體而言。但至於傳遞一個回調例程，它應該工作，如果你做出正確的/必要的更改。 – Nunchy

淡出的所有元素，然後使用callback功能褪色的特定元素：

$lis.fadeOut(1000, 'easeInCirc', function(){ 
    $(this).filter(selector).fadeIn(1000, 'easeInCirc'); 
});

http://plnkr.co/edit/0wkJGOgK3hxIfLX3RqKF?p=info

來源

2016-09-21 12:41:04 Curt

在fadeIn前添加fadeOut

回答

相關問題