jQuery fadeOut/fadeIn अपेक्षित के रूप में काम नहीं कर रहा है?

Question

मैं उपयोगकर्ता के चयन के आधार पर एक समय में एक fieldset दिखाने की कोशिश कर रहा हूं। सिद्धांत यह है कि, सभी फ़ील्ड को पहले छिपाना चाहिए, फिर चयनित फ़ील्ड दिखाया जाना चाहिए। मैं jQuery के fadeOut और 'fadeIn` फ़ंक्शंस का उपयोग कर रहा हूं।

आप इस here का एक बेवकूफ देख सकते हैं।

लेकिन यह ठीक काम नहीं करता है। क्या गलत है? जब आप स्वामित्व प्रकार बदलते हैं, तो पहले दो फ़ील्ड दिखाए जाते हैं, फिर वे मंद हो जाते हैं और फीका हो जाते हैं, और फिर इच्छित फ़ील्ड दिखाई देता है। हालांकि, वांछित व्यवहार कि, स्वामित्व प्रकार के परिवर्तन पर, वर्तमान में दृश्यमान fieldset बस बाहर हो जाते हैं, और में तो इरादा fieldset फीका है।

Answer 1

तुम भी एक 'वादा' http://api.jquery.com/jQuery.when/ उपयोग कर सकते हैं सुनिश्चित करें कि fadein जब fieldset बाहर फीका होने के बाद होता है किया जाना है।

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

बदलें अपने कोड

को

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

Answer 3

समस्या यह है कि आप पहले से ही 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/