jQuery fadeIn() और slideDown() को एक साथ कैसे चलाएं?

Question

मुझे डिस्प्ले के साथ एक div मिला है: कोई नहीं; अब मैं इसे दोनों का उपयोग करना चाहता हूं: फीडइन और स्लाइडडाउन एक साथ।

$(this).slideDown({duration: 'slow', queue: false}); 
$(this).fadeIn({duration: 'slow', queue: false}); 

div का चयन ठीक से किया जाता है। लेकिन जब मैं प्रभाव को ट्रिगर करता हूं, तो यह सब स्लाइडडाउन होता है। और अगर मैं सिर्फ स्लाइडडाउन हटा देता हूं तो मैं फीडइन देख सकता हूं, इसलिए वाक्यविन्यास में कुछ भी गलत नहीं है। लेकिन यह एनिमेशन दोनों को क्यों ट्रिगर नहीं करता है? height:0px साथ

Answer 1

प्रारंभ और opacity:0; filter: alpha(opacity = 0) तो कार्रवाई पर कार्य करें:

$(this).stop().animate({ 
    height: 200, 
    opacity: 1 
}, 350); 

बदलें ऊंचाई (मैं 200 के लिए सेट) और अवधि (मैं 350 के लिए सेट) जो कुछ भी आप चाहते हैं।

Answer 2

उपयोग fadeIn() के बजाय animate():

$(this) 
    .css('opacity', 0) 
    .slideDown('slow') 
    .animate(
    { opacity: 1 }, 
    { queue: false, duration: 'slow' } 
); 

Answer 3

यहाँ मेरी समाधान है, आप इसे एक jQuery प्लगइन के रूप में उपयोग कर सकते हैं।

(function($) { 
    'use strict'; 
    // Sort us out with the options parameters 
    var getAnimOpts = function (a, b, c) { 
      if (!a) { return {duration: 'normal'}; } 
      if (!!c) { return {duration: a, easing: b, complete: c}; } 
      if (!!b) { return {duration: a, complete: b}; } 
      if (typeof a === 'object') { return a; } 
      return { duration: a }; 
     }, 
     getUnqueuedOpts = function (opts) { 
      return { 
       queue: false, 
       duration: opts.duration, 
       easing: opts.easing 
      }; 
     }; 
    // Declare our new effects 
    $.fn.showDown = function (a, b, c) { 
     var slideOpts = getAnimOpts(a, b, c), fadeOpts = getUnqueuedOpts(slideOpts); 
     $(this).hide().css('opacity', 0).slideDown(slideOpts).animate({ opacity: 1 }, fadeOpts); 
    }; 
    $.fn.hideUp = function (a, b, c) { 
     var slideOpts = getAnimOpts(a, b, c), fadeOpts = getUnqueuedOpts(slideOpts); 
     $(this).show().css('opacity', 1).slideUp(slideOpts).animate({ opacity: 0 }, fadeOpts); 
    }; 
}(jQuery)); 

अब आप इसका उपयोग उसी तरह कर सकते हैं जैसे आप jQuery के .fadeIn (या fadeOut) प्रभाव का उपयोग करेंगे।

// Show 
$('.alert').showDown('slow'); 
// Hide 
$('.alert').hideUp('fast', function() { 
    // Animation complete: '.alert' is now hidden 
}); 

यह हमारे तत्व की ऊंचाई को लुप्तप्राय प्रभाव के साथ बदल देगा।

यह originally posted on my blog था।

Answer 4

 $(document).ready(function() { 
    $("#test").bind("click", function() { 
      setTimeout(function() { 
      $('#slidedown').slideDown("slow"); 
     }, 500); 
     $("#content").fadeOut(500); 
     $(this).stop().animate({ "opacity": "1" }, "slow"); 
     }); 
    }); 

यह फीका आउट है, लेकिन मुझे लगता है कि यह आपके बाद क्या है। कृपया उदाहरण को भी देखें: http://jsfiddle.net/oddacon/M44md/

Answer 5

अब CSS3 संक्रमण का उपयोग करना संभव है। यह बहुत लचीला समाधान प्राप्त करने की अनुमति देता है।

एचटीएमएल

<div id="btn">Click me</div> 
<div id="hidden"></div> 

सीएसएस

#hidden { 
    display: none; opacity: 0; height: 100px; background: red; 
    transition: opacity 600ms ease-in-out 0s; 
} 
#hidden.opened { 
    opacity: 1; 
} 

jQuery

$('#btn').click(function() { 
    var div = $('#hidden'); 
    if (! div.is(':animated')) { 
     div.slideToggle(600).toggleClass('opened'); 
    } 
}); 

Answer 6

अधिक आधुनिक समाधान जब आप एनिमेशन संयोजित करना चाहते हैं 'show' और 'hide' के मूल्यों का उपयोग करने के लिए है:

$('.show').on('click', function() { 
 
    $('.example').animate({ 
 
    opacity: 'show', 
 
    height: 'show', 
 
    marginTop: 'show', 
 
    marginBottom: 'show', 
 
    paddingTop: 'show', 
 
    paddingBottom: 'show' 
 
    }) 
 
}) 
 
$('.hide').on('click', function() { 
 
    $('.example').animate({ 
 
    opacity: 'hide', 
 
    height: 'hide', 
 
    marginTop: 'hide', 
 
    marginBottom: 'hide', 
 
    paddingTop: 'hide', 
 
    paddingBottom: 'hide' 
 
    }) 
 
})

.example { 
 
    background-color: blue; 
 
    height: 200px; 
 
    width: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    <button type="button" class="show">Show</button> 
 
    <button type="button" class="hide">Hide</button> 
 
</p> 
 
<div class="example"></div>