javascript - prima - load jquery ready




Animare l'elemento all'altezza automatica con jQuery (13)

Eccone uno che funziona con BORDER-BOX ...

Ciao ragazzi. Ecco un plugin jQuery che ho scritto per fare lo stesso, ma anche per tenere conto delle differenze di altezza che si verificano quando si ha il box-sizing impostato su border-box .

Ho anche incluso un plugin "yShrinkOut" che nasconde l'elemento riducendolo lungo l'asse y.

// -------------------------------------------------------------------
// Function to show an object by allowing it to grow to the given height value.
// -------------------------------------------------------------------
$.fn.yGrowIn = function (growTo, duration, whenComplete) {

    var f = whenComplete || function () { }, // default function is empty
        obj = this,
        h = growTo || 'calc', // default is to calculate height
        bbox = (obj.css('box-sizing') == 'border-box'), // check box-sizing
        d = duration || 200; // default duration is 200 ms

    obj.css('height', '0px').removeClass('hidden invisible');
    var padTop = 0 + parseInt(getComputedStyle(obj[0], null).paddingTop), // get the starting padding-top
        padBottom = 0 + parseInt(getComputedStyle(obj[0], null).paddingBottom), // get the starting padding-bottom
        padLeft = 0 + parseInt(getComputedStyle(obj[0], null).paddingLeft), // get the starting padding-left
        padRight = 0 + parseInt(getComputedStyle(obj[0], null).paddingRight); // get the starting padding-right
    obj.css('padding-top', '0px').css('padding-bottom', '0px'); // Set the padding to 0;

    // If no height was given, then calculate what the height should be.
    if(h=='calc'){ 
        var p = obj.css('position'); // get the starting object "position" style. 
        obj.css('opacity', '0'); // Set the opacity to 0 so the next actions aren't seen.
        var cssW = obj.css('width') || 'auto'; // get the CSS width if it exists.
        var w = parseInt(getComputedStyle(obj[0], null).width || 0) // calculate the computed inner-width with regard to box-sizing.
            + (!bbox ? parseInt((getComputedStyle(obj[0], null).borderRightWidth || 0)) : 0) // remove these values if using border-box.
            + (!bbox ? parseInt((getComputedStyle(obj[0], null).borderLeftWidth || 0)) : 0) // remove these values if using border-box.
            + (!bbox ? (padLeft + padRight) : 0); // remove these values if using border-box.
        obj.css('position', 'fixed'); // remove the object from the flow of the document.
        obj.css('width', w); // make sure the width remains the same. This prevents content from throwing off the height.
        obj.css('height', 'auto'); // set the height to auto for calculation.
        h = parseInt(0); // calculate the auto-height
        h += obj[0].clientHeight // calculate the computed height with regard to box-sizing.
            + (bbox ? parseInt((getComputedStyle(obj[0], null).borderTopWidth || 0)) : 0) // add these values if using border-box.
            + (bbox ? parseInt((getComputedStyle(obj[0], null).borderBottomWidth || 0)) : 0) // add these values if using border-box.
            + (bbox ? (padTop + padBottom) : 0); // add these values if using border-box.
        obj.css('height', '0px').css('position', p).css('opacity','1'); // reset the height, position, and opacity.
    };

    // animate the box. 
    //  Note: the actual duration of the animation will change depending on the box-sizing.
    //      e.g., the duration will be shorter when using padding and borders in box-sizing because
    //      the animation thread is growing (or shrinking) all three components simultaneously.
    //      This can be avoided by retrieving the calculated "duration per pixel" based on the box-sizing type,
    //      but it really isn't worth the effort.
    obj.animate({ 'height': h, 'padding-top': padTop, 'padding-bottom': padBottom }, d, 'linear', (f)());
};

// -------------------------------------------------------------------
// Function to hide an object by shrinking its height to zero.
// -------------------------------------------------------------------
$.fn.yShrinkOut = function (d,whenComplete) {
    var f = whenComplete || function () { },
        obj = this,
        padTop = 0 + parseInt(getComputedStyle(obj[0], null).paddingTop),
        padBottom = 0 + parseInt(getComputedStyle(obj[0], null).paddingBottom),
        begHeight = 0 + parseInt(obj.css('height'));

    obj.animate({ 'height': '0px', 'padding-top': 0, 'padding-bottom': 0 }, d, 'linear', function () {
            obj.addClass('hidden')
                .css('height', 0)
                .css('padding-top', padTop)
                .css('padding-bottom', padBottom);
            (f)();
        });
};

Qualsiasi parametro che ho usato può essere omesso o impostato su null per accettare valori predefiniti. I parametri che ho usato:

  • growTo: se si desidera eseguire l'override di tutti i calcoli e impostare l'altezza CSS in cui l'oggetto crescerà, utilizzare questo parametro.
  • durata: la durata dell'animazione ( ovviamente ).
  • whenComplete: una funzione da eseguire quando l'animazione è completa.

https://code.i-harness.com

Voglio animare un <div> da 200px ad altezza auto . Non riesco a farlo funzionare comunque. Qualcuno sa come?

Ecco il codice:

$("div:first").click(function(){
  $("#first").animate({
    height: "auto"
  }, 1000 );
});

  1. Salva l'altezza attuale:

    var curHeight = $('#first').height();
    
  2. Cambia temporaneamente l'altezza in automatico:

    $('#first').css('height', 'auto');
    
  3. Ottieni l'altezza automatica:

    var autoHeight = $('#first').height();
    
  4. Tornare a curHeight e animare su autoHeight :

    $('#first').height(curHeight).animate({height: autoHeight}, 1000);
    

E insieme:

var el = $('#first'),
    curHeight = el.height(),
    autoHeight = el.css('height', 'auto').height();
el.height(curHeight).animate({height: autoHeight}, 1000);

Attiva / disattiva la diapositiva ( la risposta di Box9 è stata ampliata)

$("#click-me").click(function() {
  var el = $('#first'),
  curHeight = el.height(),
  autoHeight = el.css('height', 'auto').height(),
  finHeight = $('#first').data('click') == 1 ? "20px" : autoHeight;
  $('#first').data('click', $(this).data('click') == 1 ? false : true);
  el.height(curHeight).animate({height: finHeight});
});
#first {width: 100%;height: 20px;overflow:hidden;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">
  <div id="click-me">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
</div>


Avevo bisogno di questa funzionalità per più letture di più aree su una pagina implementando questo in uno shortcode di Wordpress che mi sono imbattuto nello stesso problema.

Progettate tecnicamente tutte le letture più spagnole sulla pagina hanno un'altezza fissa. E volevo essere in grado di espanderli separatamente ad un'altezza automatica con un interruttore. Primo clic: "espandi a tutta altezza del testo", secondo clic: "riduci all'altezza predefinita di 70 px"

html

 <span class="read-more" data-base="70" data-height="null">
     /* Lots of text determining the height of this span */
 </span>
 <button data-target='read-more'>Read more</button>

CSS

span.read-more {
    position:relative;
    display:block;
    overflow:hidden;
}

Quindi sopra sembra molto semplice l'attributo data-base ho bisogno di impostare l'altezza fissa necessaria. L'attributo data-height ho usato per memorizzare l'altezza (dinamica) effettiva dell'elemento.

La parte di jQuery

jQuery(document).ready(function($){

  $.fn.clickToggle = function(func1, func2) {
      var funcs = [func1, func2];
      this.data('toggleclicked', 0);
      this.click(function() {
          var data = $(this).data();
          var tc = data.toggleclicked;
          $.proxy(funcs[tc], this)();
          data.toggleclicked = (tc + 1) % 2;
      });
      return this;
  };

    function setAttr_height(key) {
        $(key).each(function(){
            var setNormalHeight = $(this).height();
            $(this).attr('data-height', setNormalHeight);
            $(this).css('height', $(this).attr('data-base') + 'px' );
        });
    }
    setAttr_height('.read-more');

    $('[data-target]').clickToggle(function(){
        $(this).prev().animate({height: $(this).prev().attr('data-height')}, 200);
    }, function(){
        $(this).prev().animate({height: $(this).prev().attr('data-base')}, 200);
    });

});

Per prima cosa ho usato una funzione clickToggle per il mio primo e secondo clic. La seconda funzione è più importante: setAttr_height() Tutti gli elementi .read-more hanno le loro altezze reali impostate sul caricamento della pagina nell'attributo base-height . Successivamente l'altezza della base viene impostata tramite la funzione jQuery css.

Con entrambi i nostri attributi impostati ora possiamo passare da uno all'altro in modo uniforme. Cambia solo la data-base all'altezza desiderata (fissa) e cambia la classe .read-more per il tuo ID

Potete vederlo tutto funzionante in un violino FIDDLE

Non è necessaria l'interfaccia utente di jQuery


I tuoi selezionatori non sembrano corrispondere. Il tuo elemento ha un ID di "prima" o è il primo elemento di ogni div?

Una soluzione più sicura sarebbe usare "questo":

// assuming the div you want to animate has an ID of first
$('#first').click(function() {
  $(this).animate({ height : 'auto' }, 1000);
});

IMO questa è la soluzione più semplice e pulita:

$("#first").animate({height: $("#first").get(0).scrollHeight}, 1000 );

Spiegazione: Il DOM sa già dal suo rendering iniziale quali saranno le dimensioni del div espanso quando impostato su altezza automatica. Questa proprietà è memorizzata nel nodo DOM come scrollHeight . Dobbiamo solo recuperare l'elemento DOM dall'elemento jQuery chiamando get(0) e quindi possiamo accedere alla proprietà.

L'aggiunta di una funzione di callback per impostare l'altezza su auto consente una maggiore reattività una volta completata l'animazione (credit chris-williams ):

$('#first').animate({
    height: $('#first').get(0).scrollHeight
}, 1000, function(){
    $(this).height('auto');
});

Puoi sempre racchiudere gli elementi figli di #first e salvare l'altezza dell'altezza del wrapper come variabile. Questa potrebbe non essere la risposta più bella o più efficiente, ma fa il trucco.

Ecco un fiddle cui ho incluso un reset.

ma per i tuoi scopi, ecco la carne e le patate:

$(function(){
//wrap everything inside #first
$('#first').children().wrapAll('<div class="wrapper"></div>');
//get the height of the wrapper 
var expandedHeight = $('.wrapper').height();
//get the height of first (set to 200px however you choose)
var collapsedHeight = $('#first').height();
//when you click the element of your choice (a button in my case) #first will animate to height auto
$('button').click(function(){
    $("#first").animate({
        height: expandedHeight            
    })
});
});​

Questo è fondamentalmente lo stesso approccio della risposta di Box9 ma l'ho avvolto in un bel plugin jQuery che riprende gli stessi argomenti di un normale animate , per quando è necessario avere più parametri animati e si stancano di ripetere lo stesso codice all'infinito :

;(function($)
{
  $.fn.animateToAutoHeight = function(){
  var curHeight = this.css('height'),
      height = this.css('height','auto').height(),
      duration = 200,
      easing = 'swing',
      callback = $.noop,
      parameters = { height: height };
  this.css('height', curHeight);
  for (var i in arguments) {
    switch (typeof arguments[i]) {
      case 'object':
        parameters = arguments[i];
        parameters.height = height;
        break;
      case 'string':
        if (arguments[i] == 'slow' || arguments[i] == 'fast') duration = arguments[i];
        else easing = arguments[i];
        break;
      case 'number': duration = arguments[i]; break;
      case 'function': callback = arguments[i]; break;
    }
  }
  this.animate(parameters, duration, easing, function() {
    $(this).css('height', 'auto');
    callback.call(this, arguments);
  });
  return this;
  }
})(jQuery);

modifica: concatenabile e più pulito ora


Sto postando questa risposta anche se questo thread è vecchio. Non ho potuto ottenere la risposta accettata per funzionare per me. Questo funziona bene ed è piuttosto semplice.

Carico l'altezza di ogni div che voglio nei dati

$('div').each(function(){
    $(this).data('height',$(this).css('height'));
    $(this).css('height','20px');
});

Quindi lo uso solo durante l'animazione al clic.

$('div').click(function(){
    $(this).css('height',$(this).data('height'));
});

Sto usando la transizione CSS, quindi non uso jQuery animate, ma è possibile animare lo stesso.


Una soluzione migliore non si baserebbe su JS per impostare l'altezza del tuo elemento. La seguente è una soluzione che anima un elemento di altezza fissa a piena ("automatica") altezza:

var $selector = $('div');
    $selector
        .data('oHeight',$selector.height())
        .css('height','auto')
        .data('nHeight',$selector.height())
        .height($selector.data('oHeight'))
        .animate({height: $selector.data('nHeight')},400);

https://gist.github.com/2023150


puoi memorizzarlo in un attributo dati.

$('.colapsable').each(function(){
    $(this).attr('data-oheight',$(this).height());
    $(this).height(100);
});

$('.colapsable h2:first-child').click(function(){
    $(this).parent('.colapsable').animate({
            height: $(this).parent('.colapsible').data('oheight')
        },500);
    }
});

puoi sempre farlo:

jQuery.fn.animateAuto = function(prop, speed, callback){
var elem, height, width;
return this.each(function(i, el){
    el = jQuery(el), elem = el.clone().css({"height":"auto","width":"auto"}).appendTo("body");
    height = elem.css("height"),
    width = elem.css("width"),
    elem.remove();

    if(prop === "height")
        el.animate({"height":height}, speed, callback);
    else if(prop === "width")
        el.animate({"width":width}, speed, callback);  
    else if(prop === "both")
        el.animate({"width":width,"height":height}, speed, callback);
});  
}

ecco un violino: http://jsfiddle.net/Zuriel/faE9w/2/


var h = document.getElementById('First').scrollHeight;
$('#First').animate({ height : h+'px' },300);




jquery-animate