बूटस्ट्रैप: डिफॉल्ट 'फीड', 'छुपाएं', 'इन' कक्षाओं का उपयोग करके कुछ कैसे फीका और छुपाएं?

Question

बूटस्ट्रैप स्पष्ट रूप से इसके परिवर्तन के लिए 'छुपाएं', 'फीका' और 'इन' कक्षाओं का उपयोग करता है।

मेरी समस्या यह है कि 'फीका' और 'इन' का उपयोग करके अस्पष्टता 0 से 1 तक बदल जाएगी। संक्रमण प्रभाव सही है, लेकिन सामग्री अभी भी पृष्ठ पर स्थान ले रही है, भले ही आप इसे नहीं देख सकते उदाहरण के लिए, यदि कंटेनर की सीमा है, तो सीमा से पहले एक बड़ी सफेद जगह होगी।

मैं 'इन' कक्षा को जोड़कर और हटाकर अपने एक्सिसिटिंग सीएसएस संक्रमण का उपयोग करना चाहता हूं, लेकिन मैं भी जो भी तत्व बाहर निकल रहा हूं, छिपाने के लिए चाहता हूं, लेकिन संक्रमण समाप्त होने के बाद ही। तो मूल रूप से, वे मोडल में वास्तव में क्या करते हैं, लेकिन मुझे नहीं पता कि वे इसे कैसे करते हैं।

नीचे दिए गए मेरे उदाहरण में, छुपा जोड़ने या हटाने का मतलब है कि फीड प्रभाव होने से पहले div प्रकट होता है या गायब हो जाता है।

JS fiddle here

उदाहरण HTML:

<div class="control-group"> 
    <label class="control-label">Choose one:</label> 
    <div class="controls"> 
     <label class="radio inline"> 
      <input type="radio" name="color-radio" id="yellow-trigger" value="yellow" />Yellow Box</label> 
     <label class="radio inline"> 
      <input type="radio" name="color-radio" id="red-trigger" value="red" />Red Box</label> 
    </div> 
</div> 
<div id="yellow-box" class="hide fade"> 
    <p>I'm yellow</p> 
</div> 
<div id="red-box" class="hide fade"> 
    <p>I'm red</p> 
</div> 

उदाहरण जे एस:

$(document).ready(function() { 
    $('#yellow-trigger').click(function() { 
     $('#yellow-box').addClass('in').removeClass('hide'); 
     $('#red-box').addClass('hide').removeClass('in'); 
    }); 

    $('#red-trigger').click(function() { 
     $('#red-box').addClass('in').removeClass('hide'); 
     $('#yellow-box').addClass('hide').removeClass('in'); 
    }); 
}); 

Answer 1

किसी भी कारण सिर्फ fadein प्रभाव के लिए jQuery का उपयोग नहीं? नीचे jQuery के साथ फीका प्रभाव बनाने के लिए कुछ कोड है।

Fiddle here

निकाली गई "फीका" वर्ग

<div id="yellow-box" class="hide"> 
<p>I'm yellow</p> </div> 

$(document).ready(function() { 
$('#yellow-trigger').click(function() { 
    $('#red-box').hide(); 
    $('#yellow-box').fadeIn('slow'); 
}); 

$('#red-trigger').click(function() { 
    $('#yellow-box').hide(); 
    $('#red-box').fadeIn('slow');  
}); 

}) में फीका के लिए अपडेट किया गया jQuery;

Answer 2

यह बहुत पुराना है, लेकिन यदि कोई और यहां मिलता है, तो इसका जवाब कृत्रिम घटना bsTransitionEnd के लिए एकल शॉट हैंडलर का उपयोग करना है।

उदाहरण:

$(".alert").one('bsTransitionEnd',function() { 
    $(this).addClass('hide'); 
}); 
window.setTimeout(function(){ 
    $(".alert").removeClass('in'); 
},1000);