jQuery fadeOut/fadeTrong không hoạt động như mong đợi?

Question

Tôi đang cố gắng hiển thị một fieldset cùng một lúc, dựa trên lựa chọn của người dùng. Lý thuyết là, tất cả các fieldets nên ẩn đầu tiên, sau đó fieldset được chọn sẽ được hiển thị. Tôi đang sử dụng các hàm fadeOut và 'fadeIn` của jQuery.

Bạn có thể thấy số f2 của số này here.

Nhưng nó không hoạt động tốt. Chuyện gì vậy? Khi bạn thay đổi loại quyền sở hữu, hai trường đầu tiên được hiển thị, sau đó chúng mờ đi và mờ dần, sau đó trường dự định sẽ xuất hiện. Tuy nhiên, hành vi mong muốn là, về việc thay đổi loại sở hữu, các fieldset hiện thời hiển thị đơn giản mờ dần, và sau đó là phai fieldset dự định trong.

Answer 1

Bạn cũng có thể sử dụng một 'lời hứa' http://api.jquery.com/jQuery.when/ để chắc chắn rằng fadeIn xảy ra sau khi fieldset đã nhạt nhòa dần.

$(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/

Answer 2

Thay đổi mã của bạn để

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

Bạn chỉ muốn làm mờ dần trường dữ liệu hiện đang hiển thị.

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

Answer 3

Vấn đề là bạn đã có ẩn fieldset và cho những yếu tố hoạt hình của fadeOut cháy ngay lập tức, vì nó đã được ẩn.

Hãy thử thay đổi như sau:

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

Code: http://jsfiddle.net/DtaHQ/20/