jQuery Animation - Glatte Größe Transition

Question

So könnte dies wirklich einfach sein, aber ich habe keine Beispiele finden kann weg von noch zu lernen, so wenden Sie sich bitte mit mir tragen. ;)

Hier ist im Grunde, was ich tun möchte:

<div>Lots of content! Lots of content! Lots of content! ...</div>

.... 

$("div").html("Itsy-bitsy bit of content!");

Ich möchte reibungslos zwischen den Dimensionen des div mit viel Inhalt auf die Abmessungen des div animieren mit sehr wenig, wenn der neue Inhalt injiziert wird.

Die Gedanken?

Answer 1

Versuchen Sie, diese jQuery-Plugin:

// Animates the dimensional changes resulting from altering element contents
// Usage examples: 
//    $("#myElement").showHtml("new HTML contents");
//    $("div").showHtml("new HTML contents", 400);
//    $(".className").showHtml("new HTML contents", 400, 
//                    function() {/* on completion */});
(function($)
{
   $.fn.showHtml = function(html, speed, callback)
   {
      return this.each(function()
      {
         // The element to be modified
         var el = $(this);

         // Preserve the original values of width and height - they'll need 
         // to be modified during the animation, but can be restored once
         // the animation has completed.
         var finish = {width: this.style.width, height: this.style.height};

         // The original width and height represented as pixel values.
         // These will only be the same as `finish` if this element had its
         // dimensions specified explicitly and in pixels. Of course, if that 
         // was done then this entire routine is pointless, as the dimensions 
         // won't change when the content is changed.
         var cur = {width: el.width()+'px', height: el.height()+'px'};

         // Modify the element's contents. Element will resize.
         el.html(html);

         // Capture the final dimensions of the element 
         // (with initial style settings still in effect)
         var next = {width: el.width()+'px', height: el.height()+'px'};

         el .css(cur) // restore initial dimensions
            .animate(next, speed, function()  // animate to final dimensions
            {
               el.css(finish); // restore initial style settings
               if ( $.isFunction(callback) ) callback();
            });
      });
   };


})(jQuery);

Commenter RonLugge weist darauf hin, dass dies zu Problemen führen kann, wenn man sie zweimal auf dem gleichen Element nennen (s), in dem die erste Animation nicht beendet ist, bevor die zweite beginnt. Dies liegt daran, die zweite Animation wird die aktuelle (Mitte Animation) Größen wie die gewünschten „Endung“ Werte annehmen, und geht sie als die Endwerte zu beheben (effektiv die Animation in seinen Schienen zu stoppen, anstatt Animieren in Richtung auf die „natürliche“ Größe ) ...

Der einfachste Weg, dies zu lösen, ist zu nennen stop() vor showHtml() Aufruf und vorbei true für die Sekunde ( jumpToEnd ) Parameter:

$(selector).showHtml("new HTML contents")
           .stop(true, true)
           .showHtml("even newer contents");

Dies wird die erste Animation führen sofort zu beenden (wenn es noch ausgeführt wird), bevor Sie einen neuen Anfang.

Answer 2

Sie können das belebtes Methode verwenden.

$("div").animate({width:"200px"},400);

Answer 3

vielleicht so etwas wie das?

$(".testLink").click(function(event) {
    event.preventDefault();
    $(".testDiv").hide(400,function(event) {
        $(this).html("Itsy-bitsy bit of content!").show(400);
    });
});

Nähe, was ich denke, man wollte, auch versuchen, Einschub / SlideOut oder schauen Sie auf der UI / Effects Plug-In.

Answer 4

Hier ist, wie ich dieses Problem behoben, ich hoffe, dass dies sehr nützlich sein wird! Die Animation ist 100% glatt:)

HTML:

<div id="div-1"><div id="div-2">Some content here</div></div>

Javascript:

// cache selectors for better performance
var container = $('#div-1'),
    wrapper = $('#div-2');

// temporarily fix the outer div's width
container.css({width: wrapper.width()});
// fade opacity of inner div - use opacity because we cannot get the width or height of an element with display set to none
wrapper.fadeTo('slow', 0, function(){
    // change the div content
    container.html("<div id=\"2\" style=\"display: none;\">new content (with a new width)</div>");
    // give the outer div the same width as the inner div with a smooth animation
    container.animate({width: wrapper.width()}, function(){
        // show the inner div
        wrapper.fadeTo('slow', 1);
    });
});

Es könnte eine kürzere Version von meinem Code, aber ich hielt es einfach so.

Answer 5

Das macht den Job für mich. Sie können auch eine Breite in das temporäre div hinzuzufügen.

$('div#to-transition').wrap( '<div id="tmp"></div>' );
$('div#tmp').css( { height: $('div#to-transition').outerHeight() + 'px' } );
$('div#to-transition').fadeOut('fast', function() {
  $(this).html(new_html);
  $('div#tmp').animate( { height: $(this).outerHeight() + 'px' }, 'fast' );
  $(this).fadeIn('fast', function() {
    $(this).unwrap();
  });
});

Answer 6

Hallo meyahoocoma4c5ki0pprxr19sxhajsogo6jgks5dt.

Sie könnten den ‚Inhalt div‘ mit einem ‚äußeren div‘ wickeln, die auf einen absoluten Breitenwert eingestellt ist. Injizieren, um die neuen Inhalte mit einem „verstecken ()“ oder „belebtem ({width})“ Verfahren, in den anderen Antworten gezeigt. Auf diese Weise wird die Seite nicht umfließt dazwischen, weil die Umhüllung div hält eine stetige Breite.

Answer 7

Sie können die jQuery Animation mit dequeue glätten. Test auf das Vorhandensein von Klasse (gesetzt auf schweben und entfernt auf mouseOut Rückruf animieren), bevor neue Animation anstarrte. Wenn neue Animation beginnt, dequeue.

Hier ist eine kurze Demo.

var space = ($(window).width() - 100);
$('.column').width(space/4);

$(".column").click(function(){
    if (!$(this).hasClass('animated')) {
        $('.column').not($(this).parent()).dequeue().stop().animate({width: 'toggle', opacity: '0.75'}, 1750,'linear', function () {});
    }

  $(this).addClass('animated');
    $('.column').not($(this).parent()).dequeue().stop().animate({width: 'toggle', opacity: '0.75'}, 1750,'linear', function () {
          $(this).removeClass('animated').dequeue();

      });
    $(this).dequeue().stop().animate({
        width:(space/4)
    }, 1400,'linear',function(){
      $(this).html('AGAIN');
    });
});

Die Demo ist Setup als 5 Vollhöhe Spalten wird Toggle Breite der anderen 3 animieren und bewegen zu weit links das geklickt Element eine der Spalten 2 bis 5 klicken.

Answer 8

Um huckepack auf der jQuery-Plugin-Lösung (zu niedrigen Ruf dies als Kommentar hinzufügen) jQuery.html () wird alle Event-Handler auf dem beigefügten html entfernen. Ändern:

// Modify the element's contents. Element will resize.
el.html(html);

// Modify the element's contents. Element will resize.
el.append(html);

wird die Ereignishandler der „html“ Elemente beibehalten