jQuery的使用淡出隱藏內容和淡入成功重複

我與分級mailing-list一個li它h4 X3 input[type=text]和spanjQuery的使用淡出隱藏內容和淡入成功重複

$('.mailing-list input').fadeOut(); 
$('.mailing-list span').fadeOut(function(){ 
    $('.mailing-list').append('<div><img src="/build/wp-content/themes/andersons/img/icons/tick.png"/></div>').hide().fadeIn().delay(2000).fadeOut(function(){ 
     $(this).remove(); 
     $('.mailing-list input, .mailing-list span').fadeIn(); 
    }); 
});

當我結合前2到

$('.mailing-list span, .mailing-list input').fadeOut(function(){

附加內容重複4次

<div><img src="/build/wp-content/themes/andersons/img/icons/tick.png"/></div>

有沒有簡化我的初始代碼的方法？

HTML

<li class="mailing-list"> 
    <h4>Join our mailing list</h4> 
    <input type="text" placeholder="First name" class="input half subscribe-first"> 
    <input type="text" placeholder="Last name" class="input half half-last subscribe-last"> 
    <input type="text" placeholder="Email address" class="input subscribe-email"> 
    <span class="go subscribe-btn">GO</span> 
</li>

的目標是隱藏input領域和span和離開H4並與image股利褪色，延遲2秒鐘，然後淡出和淡入回到inputs和span

來源

2014-02-26 ngplayground

發表您的HTML將與答案 – kasdega

幫助張貼HTML之後，描述你的目標是什麼，而不講關於標記具體。例如：我想淡化這一行，並使用新數據淡入。 – technophobia

使用以下代碼：

$(selector).fadeOut(callback);

callback函數將爲$(selector)所選的每個單獨節點調用一次。
4個節點 - > 4個呼叫。有一個單獨的函數調用

一種方式是採取由fadeOut創建底層Promise的優勢：

$(selector).fadeOut().promise().done(callback); 
// or 
$.when($(selector).fadeOut()).done(callback);

與您的代碼：

$.when($('.mailing-list span, .mailing-list input')).fadeOut()).done(function(){ 
    $('.mailing-list').append('<div><img src="/build/wp-content/themes/andersons/img/icons/tick.png"/></div>').hide().fadeIn().delay(2000).fadeOut(function(){ 
     $(this).remove(); 
     $('.mailing-list input, .mailing-list span').fadeIn(); 
    }); 
});

但是，它沒有得到更簡單比你現有的要多。

來源

2014-02-26 15:33:45 LeGEC

據我可以告訴你的代碼片段它很好，並不需要簡化。

如果您按照您的描述組合了選擇器，那麼將爲每個匹配元素調用[complete]回調函數，其中在此示例中有四個匹配元素。

只要您只有.mailing-list塊內的一個<span>元素，附功能將只能被調用一次。

來源

2014-02-26 15:37:49 Starscream1984

像許多人已經說過的那樣，您將目標集中在$('.mailing-list span')的元素上，因此動畫的回調觸發次數也是如此。

兩種方式來簡化代碼：

包裹你的目標內容與股利 - 讓你任意數量的元素後添加到它。
您也可以將img容器預先加載到標記中（隱藏），因此您的JavaScript中沒有任何標記。

例HTML

<li class="mailing-list"> 
    <h4>Join our mailing list</h4> 
    <div class="mailing-list-content"> 
     <input type="text" placeholder="First name" class="input half subscribe-first"> 
     <input type="text" placeholder="Last name" class="input half half-last subscribe-last"> 
     <input type="text" placeholder="Email address" class="input subscribe-email"> 
     <span class="go subscribe-btn">GO</span> 
    </div> 
    <div class="mailing-list-confirmation" style="display:none"><img src="/build/wp-content/themes/andersons/img/icons/tick.png"/></div> 
</li>

的JavaScript

$('.mailing-list-content').fadeOut(function() { 
    var $content = $('.mailing-list-content'); 
    $content.closest('.mailing-list').find('.mailing-list-confirmation').fadeIn(function(){ 
     $(this).fadeOut(function() { 
      $content.fadeIn(); 
     }); 
    }); 
});

來源

2014-02-26 15:53:15 technophobia

jQuery的使用淡出隱藏內容和淡入成功重複

回答

相關問題