jQuery fadeOut/fadeIn按預期工作嗎？

我試圖根據用戶的選擇一次顯示一個fieldset。理論是，所有字段集都應該先隱藏，然後顯示所選字段集。我使用jQuery的fadeOut和'fadeIn`函數。jQuery fadeOut/fadeIn按預期工作嗎？

你可以看到這個here的小提琴。

但它不能正常工作。怎麼了？當您更改所有權類型時，顯示前兩個字段集，然後它們變暗並淡出，然後出現預期字段集。然而，所需的行爲是，在所有制類型的變化，當前可見的字段集簡單地淡出，然後在預期的字段集褪色。

2011-10-04 Saeed Neamati

你應該在這裏發佈的代碼的情況下的jsfiddle將來使用不存在。 –

你也可以使用一個「承諾」 http://api.jquery.com/jQuery.when/可以肯定的是，當字段集已經淡出後淡入發生。

$(function() { 
    var ownershipType = $('#ownershipType').first(); 
    var fieldsets = $('fieldset'); 
    ownershipType.change(function() { 
     var promise = fieldsets.fadeOut(2000); 
     $.when(promise).then(function() {$('fieldset[data-ownership-type=' + ownershipType.val() + ']').fadeIn('fast'); 
     }); 
    }); 
});

http://jsfiddle.net/DtaHQ/26/

來源

2011-10-04 07:54:42 Vertigo

好吧，好！我學到了一些新東西。謝謝你的屬性方式@Vertigo。 –

更改您的代碼以

$(function() { 
    var ownershipType = $('#ownershipType').first(); 
    var fieldsets = $('fieldset'); 
    ownershipType.change(function() { 
     $('fieldset:visible').fadeOut(2000, function() { 
      $('fieldset[data-ownership-type=' + ownershipType.val() + ']').fadeIn('fast'); 
     }); 
    }); 
});

你只想要淡出當前可見的字段集。

http://jsfiddle.net/DtaHQ/24/

來源

2011-10-04 07:49:34

但爲什麼我的代碼不起作用？我的意思是，畢竟，淡化某種看不見的東西不應該破壞任何東西？ –

Samich有一個答案。您的原始代碼確實表示「淡出所有字段集」。但你有一個好點。 [fadeOut的文檔]（http://api.jquery.com/fadeOut/）確實表示已經隱藏的div不受此動畫的制約。 :)幫助解釋你的問題upvotes的好數字！ –

的問題是，你已經隱藏fieldset並立即fadeOut火災的這些元素的動畫，因爲它已經隱藏。

嘗試改變這一點：

$(function() { 
    var ownershipType = $('#ownershipType').first(); 
    ownershipType.change(function() { 
     $('fieldset:visible').fadeOut(2000, function() { 
      $('fieldset[data-ownership-type=' + ownershipType.val() + ']').fadeIn('fast'); 
     }); 
    }); 
});

代碼：http://jsfiddle.net/DtaHQ/20/

來源

2011-10-04 07:49:52 Samich

你的解釋只是震撼@Samich。偉大的音符。謝謝，+1 –

jQuery fadeOut/fadeIn按預期工作嗎？

回答

相關問題