2011-07-21 22 views
11

मैं निम्न स्क्रिप्ट जो अच्छी तरह से काम करता है:एक ही समय में फीका और स्लाइड करें?

$(that).parents(".portlet").fadeOut('slow', function() { 
    $(that).parents(".portlet").remove(); 
}); 

यह सिर्फ तत्व फ़ेड आउट, फिर स्क्रीन से पूरी तरह से उसे निकाल देता है।

मैं इसे फिसलने के दौरान इसे स्लाइड करके प्रभाव में थोड़ा सुधार करना चाहता हूं। मुझे यह कैसे करना है?

बस स्पष्ट करने के लिए, मैं नहीं चाहता कि यह स्लाइड हो जाए, फिर स्लाइड करें, या फिर बाहर निकल जाएं, मैं इसे फीका करना चाहूंगा, और साथ ही साथ यह खत्म हो रहा है, मैं चाहूंगा इसे स्लाइड करने के लिए।

+0

के संभावित डुप्लिकेट [fadeOut() और slideUp() एक ही समय में?] (Http://stackoverflow.com/questions/2387515/fadeout-and-slideup-at-the-same-time) –

उत्तर

17
$(that) 
    .parents(".portlet") 
    .animate({height: 0, opacity: 0}, 'slow', function() { 
     $(this).remove(); 
    }); 
+1

डांग, मैं बहुत धीमी गति से कर रहा हूं :(... अच्छा, [यहां डेमो है] (http://jsfiddle.net/Chouchen/p5AuB/) – Shikiryu

4

किस बारे में:

$('#clickme').click(function() { 
    $('#book').animate({ 
    opacity: 0, 
    height: '0' 
    }, 5000, function() { 
    // Animation complete. 
    }); 
}); 

0 और ऊंचाई opacque के लिए जाना जाएगा 0.

यहाँ और अधिक जानें:

0

आप jQuery के समारोह .animate उपयोग कर सकते हैं

आप जितनी चाहें उतनी एनिमेशन सेट कर सकते हैं। पैरामीटर & भी slideUp पैरामीटर

api.jquery.com/animate/

0

आप .animate() उपयोग कर सकते हैं के रूप में के रूप में

पास अस्पष्टता।

$(that).parents(".portlet").animate({ 
    opacity: 0, 
    height: 0 
}, 'slow', 'linear', function() { 
    $(that).parents(".portlet").remove(); 
}); 
1

jQuery .animate() के साथ, आप एक ही बार में कई गुण में हेरफेर कर सकते हैं - demo

1

कूद प्रभाव से बचने के लिए गद्दी & मार्जिन के बारे में भूल नहीं है देखते हैं। JQuery-Team प्रॉपर्टी 0 का उपयोग नहीं करता है। इसके बजाय वे मान 'छुपाएं' & 'शो' का उपयोग कर रहे हैं। जैसे

$('#elementId').animate({ 
      opacity: 'hide',  // animate slideUp 
      margin: 'hide', 
      padding: 'hide', 
      height: 'hide'  // animate fadeOut 
     }, 'slow', 'linear', function() { 
      $(this).remove(); 
     }); 
संबंधित मुद्दे