मैं jQuery

का उपयोग करके अपनी प्राकृतिक ऊंचाई पर एक तत्व को कैसे एनिमेट कर सकता हूं। मैं अपनी "प्राकृतिक" ऊंचाई को एनिमेट करने के लिए तत्व प्राप्त करने की कोशिश कर रहा हूं - यानी ऊंचाई अगर यह height: auto; थी।मैं jQuery

मैं इस के साथ आ गया है:

var currentHeight = $this.height(); 
$this.css('height', 'auto'); 
var height = $this.height(); 
$this.css('height', currentHeight + 'px'); 

$this.animate({'height': height});

वहाँ यह करने के लिए एक बेहतर तरीका है? यह एक हैक की तरह लगता है।

संपादित करें: यहां परीक्षण करने के लिए इच्छित किसी भी व्यक्ति के साथ खेलने के लिए एक पूर्ण स्क्रिप्ट है।

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
    <head> 
     <title>jQuery</title> 
     <style type="text/css"> 
      p { overflow: hidden; background-color: red; border: 1px solid black; } 
      .closed { height: 1px; } 
     </style> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 
     <script type="text/javascript"> 
     $().ready(function() 
     { 
      $('div').click(function() 
      { 
       $('p').each(function() 
       { 
        var $this = $(this); 

        if ($this.hasClass('closed')) 
        { 
         var currentHeight = $this.height(); 
         $this.css('height', 'auto'); 
         var height = $this.height(); 
         $this.css('height', currentHeight + 'px'); 

         $this.animate({'height': height}); 
        } 
        else 
        { 
         $this.animate({'height': 1}); 
        } 

        $this.toggleClass('closed'); 
       }); 
      }); 
     }); 
     </script> 
    </head> 

    <body> 

     <div>Click Me</div> 
     <p>Hello - I started open</p> 
     <p class="closed">Hello - I started closed</p> 

    </body> 
</html>

स्रोत

2009-09-02 Greg

इस वैरिएबल ग्रेग – redsquare

मैं एक समान रूप से-hackish समाधान का सुझाव सकता है ..., तत्व क्लोन दृश्य से बाहर यह स्थिति और इसकी ऊंचाई बहुत मिलता है ... फिर उसे हटाने और अपने मूल चेतन।

एक तरफ, आप भी $ इस्तेमाल कर सकते हैं कि .slideUp() और $ .slideDown():

$this.hasClass('closed') ? $(this).slideDown() : $(this).slideUp() ;

आप एक 1px लाइन रखने की जरूरत है, तो आप एक माता पिता के तत्व के साथ लागू कर सकते हैं:

<div style='border-top:1px solid #333333'> 
    <div class='toggleMe'>Hello World</div> 
</div>

और .toggleMe div पर स्लाइडिंगअप/डाउन लागू करें।

स्रोत

2009-09-02 19:44:46 Sampson

को लगता है कि यह काम करेगा, लेकिन मुझे यकीन नहीं है कि यह एक सुधार होगा :) मुझे यकीन है कि यह काम करेगा लेकिन मैं jQuery में नया हूं इसलिए मैं सोच रहा हूं कि वहां होना चाहिए एक गैर-हैकी तरीका – Greg

किसी भी कारण से आपने $ .slideUp() और $ .slideDown() के साथ नहीं जाने का निर्णय लिया है? – Sampson

मुझे इसे 1px ऊँचाई पर रोकने की आवश्यकता है और मुझे नहीं लगता कि यह उन कार्यों के साथ संभव है (हालांकि गलत हो सकता है) – Greg

$('div').click(function() { 
    if($('p').is(':hidden')) { 
     $('p').slideUp(); 
    } else { 
     $('p').slideDown(function() { $('p').css('height','1px'); }); 
    } 
}

जो स्लाइडिंग समाप्त होने के बाद पी टैग की ऊंचाई 1px होने चाहिए।

स्रोत

2009-09-02 19:57:59 Steerpike

इससे प्रत्येक पी-टैग की ऊंचाई 1px पर सेट हो जाएगी। – Sampson

$ (यह)। सीएसएस ('ऊंचाई', '1 पीएक्स'); तब ठीक होना चाहिए। – Steerpike

आप इसे स्लाइडडाउन() विधि के कॉलबैक पर लागू कर रहे हैं, जिसका अर्थ है कि जैसे ही यह दिखाई दे रहा है, यह फिर से छिपे जा रहा है। क्या आप इसे स्लाइडअप के लिए सेट करना चाहते थे? – Sampson

मैं अपने आप को इस धागे का जवाब देने की अनुमति देता हूं, भले ही इसका उत्तर बहुत समय पहले दिया गया हो, cuz ने मुझे अभी मदद की।

वास्तव में, मुझे पहला जवाब नहीं समझा जाता है: इसकी ऊंचाई प्राप्त करने के लिए आधा बंद तत्व क्यों खोलना, और फिर इसे फिर से बंद करना?

शुरुआत में, आप तत्व को छुपाते हैं ताकि इसका एक हिस्सा दिखाई दे, है ना? जावास्क्रिप्ट के साथ यह करने का सबसे अच्छा तरीका (मुझे विश्वास है) पहले से ही है। इसलिए, जब आप पहले से तत्व को छुपाते हैं, तो मूल ऊंचाई को एक var में सहेजें, इसलिए आपको तत्व दृश्यता को टॉगल करने में सक्षम होने के लिए ऊंचाई (छुपाएं) -शो-सेव ऊंचाई-छिपाने की आवश्यकता नहीं है। मैं क्या किया पर

देखो, यह पूरी तरह से काम करता है:

$(document).ready(function(){ 
var origHeight = $("#foo").css('height'); 
$("#foo").css({"height" : "80px"}); 
$("#foo .toggle").bind("click", function(event){ toggleFoo(event, lastSearchesMidHeight); }); 
});

यहाँ, जब आप अपने टॉगल फ़ंक्शन को कॉल करें, आप जानते हैं कि चारों ओर wanking के बिना अपने मूल तत्व ऊंचाई है।

मैंने इसे तेजी से लिखा, उम्मीद है कि यह भविष्य में किसी की मदद कर सकता है।

स्रोत

2010-09-29 20:02:19 Pioul

यह एक बेहतर जवाब है। धन्यवाद। – theorise

यदि मैं अपना समाधान किसी की भी मदद करता हूं, तो मैं भी इस पुराने धागे पर झुकना चाहूंगा। मेरी विशिष्ट स्थिति यह है: मेरे पास कुछ div है जो अधिकतम ऊंचाई मान के साथ सेट हैं जो उन्हें तीन पंक्तियों तक सीमित करता है, और जब उपयोगकर्ता उन्हें माउसवॉवर्स करता है, तो मैं उन्हें अपनी प्राकृतिक ऊंचाई तक विस्तारित करना चाहता हूं; और जब माउस कर्सर div को छोड़ देता है, तो मैं चाहता हूं कि वे क्लिप, अधिकतम-तीन-रेखा-ऊंची ऊंचाई पर वापस हट जाएं। मुझे ऊंचाई की बजाय सीएसएस अधिकतम-ऊंचाई संपत्ति का उपयोग करने की आवश्यकता है, क्योंकि मेरे पास कुछ div हैं जिनमें टेक्स्ट की केवल एक या दो पंक्तियां हैं और मैं उन्हें अनावश्यक रूप से लंबा नहीं चाहता हूं।

मैंने इस धागे में कई समाधानों की कोशिश की, और जो मेरे लिए काम करता है वह 'हैकिश सुझाव' था जो जोनाथन सैम्पसन द्वारा सुझाए गए क्लोन तत्वों को शामिल करता था। मैंने अपने विचार को निम्नलिखित कोड में अनुवादित किया।कृपया सुधार का सुझाव देने के लिए स्वतंत्र महसूस करें।

कार्यों को अजाक्स कॉल के माध्यम से div के बनाए गए हैंडल को संभालने के लिए मूल तत्व को सौंपा गया है। div.overflow_expandable वर्ग निम्नलिखित घोषणा की है: { max-height: 5em; overflow: hidden; }

$('#results').delegate('div.overflow_expandable', 'mouseenter', function() { 
    var $this = $(this); 

    // Close any other open divs 
    $('#results div.overflow_expandable').not($(this)).trigger('mouseleave'); 

    // We need to convert the div's current natural height (which is less than 
    // or equal to its CSS max-height) to be a defined CSS 'height' property, 
    // which can then animate; and we unset max-height so that it doesn't 
    // prevent the div from growing taller. 
    if (!$this.data('originalHeight')) { 
     $this.data('originalHeight', $this.height()); 
     $this.data('originalMaxHeight', parseInt($this.css('max-height'))); 
     $this.css({ 'max-height':'none', 
      height: $this.data('originalHeight') }); 
    } 

    // Now slide out if the div is at its original height 
    // (i.e. in 'closed' state) and if its original height was equal to 
    // its original 'max-height' (so when closed, it had overflow clipped) 
    if ($this.height() == $this.data('originalHeight') && 
     $this.data('originalMaxHeight') == $this.data('originalHeight')) { 
     // To figure out the new height, clone the original element and set 
     // its height to auto, then measure the cloned element's new height; 
     // then animate our div to that height 
     var $clone = $this.clone().css({ height: 'auto', position: 'absolute', 
      zIndex: '-9999', left: '-9999px', width: $this.width() }) 
      .appendTo($this); 
     $this.animate({ height: $clone.height() }, 'slow'); 
     $clone.detach(); 
    } 
}).delegate('div.overflow_expandable', 'mouseleave', function() { 
    var $this = $(this); 
    // If the div has 'originalHeight' defined (it's been opened before) and 
    // if it's current height is greater than 'originalHeight' (it's open 
    // now), slide it back to its original height 
    if ($this.data('originalHeight') && 
     $this.height() > $this.data('originalHeight')) 
     $this.animate({ height: $this.data('originalHeight') }, 'slow'); 
});

स्रोत

2010-11-21 21:35:27

इस पोस्ट मिले और ग्रेग के मूल 1px सुझाव का उपयोग कर अंत - महान काम करता है!

एनीमेशन समाप्त होने पर तत्व की ऊंचाई को 'ऑटो' पर सेट करने के लिए एनिमेट फ़ंक्शन में कॉलबैक जोड़ा गया (मेरे मामले में, उस विशिष्ट तत्व की सामग्री बदल सकती है और बड़ी हो सकती है)।

स्रोत

2011-04-16 18:27:10

मुझे मिला सबसे आसान समाधान केवल सामग्री तत्व को एक div के साथ लपेटना था जो ऊंचाई में सीमित है और अतिप्रवाह पर सेट है: छुपा हुआ। यह रैपिंग div की ऊंचाई पर आंतरिक सामग्री तत्व को छोटा करता है। जब उपयोगकर्ता सामग्री तत्व की पूर्ण ऊंचाई दिखाने के लिए क्लिक करता है, hovers, आदि - आंतरिक सामग्री div की ऊंचाई पर रैपिंग div को एनिमेट करें।

स्रोत

2011-07-21 14:12:14 Tobias

मुझे इस समाधान से प्यार है, वास्तव में साफ, लचीला और कुछ जेएस गणना करने से बचने का एक शानदार तरीका जो सामग्री के आधार पर तोड़ सकता है। शीर्ष उत्कृष्टता Tobias !! –

यह मेरे लिए काम किया।

<div class="product-category"> 
    <div class="category-name"> 
     Cars 
    </div> 
    <div class="category-products" style="display: none; overflow: hidden;"> 
     <div class="product">Red Car</div> 
     <div class="product">Green Car</div> 
     <div class="product">Yellow Car</div> 
    </div> 
</div> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.product-category .category-name').click(function() { 
     if ($(this).parent().hasClass('active')) { 
      $(this).parent().removeClass('active'); 
      var height = $(this).parent().find('.category-products').height(); 
      $(this).parent().find('.category-products').animate({ height : '0px' }, 600, function() { 
       $(this).parent().find('.category-products').height(height).hide(); 
      }); 
     } else { 
      $(this).parent().addClass('active'); 
      var height = $(this).parent().find('.category-products').height(); 
      $(this).parent().find('.category-products').height(0).show().animate({ height : height + 'px' }, 600); 
     } 
    }); 
}); 
</script>

स्रोत

2011-11-22 01:14:00

मेरे समाधान बंद करें बटन कंटेनर के मूल आकार के data विशेषता में स्टोर करने के लिए (कंटेनर अपने आप में भी संग्रहीत किया जा सकता था है, यदि आप एक ही बटन का उपयोग नहीं करते के लिए भी फिर से दिखाने कंटेनर):

$(document).ready(function(){ 
    $('.infoBox .closeBtn').toggle(hideBox, showBox); 
}); 

function hideBox() 
{ 
    var parent = $(this).parent(); 

    $(this).text('Show').data('originalHeight', parent.css('height')); 

    parent.animate({'height': 20}); 
    return false; 
} 

function showBox() 
{ 
    var parent = $(this).parent(); 

    $(this).text('Hide'); 

    parent.animate({ 
     'height': $(this).data('originalHeight') 
    }); 
    return false; 
}

स्रोत

2012-07-20 18:11:48

मैं this answer को इंगित करने के है, जो ऊंचाई की स्थापना का सुझाव चाहते थे animate() फ़ंक्शन के साथ "शो" के लिए। मुझे ऊंचाई का उपयोग करने के लिए अपना "स्लाइडअप" स्टाइल एनिमेट संपादित करना था: इसके साथ काम करने के लिए "छुपाएं"।

स्रोत

2014-06-02 12:44:58

मैं jQuery

उत्तर

संबंधित मुद्दे