web-dev-qa-db-ja.com

jQueryアニメーション-スムーズなサイズ移行

これは本当に簡単かもしれませんが、まだ学ぶべき例が見つかりませんでしたので、ご容赦ください。 ;）

基本的に私がやりたいことは次のとおりです。

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

.... 

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

新しいコンテンツが挿入されたときに、多くのコンテンツを含むdivのディメンションと、ほとんどないdivのディメンションとの間をスムーズにアニメーション化したいと思います。

考え？

jqueryanimationresize
33
neezer

このjQueryプラグインを試してください。

_// 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);
_

コメンターのRonLuggeは、同じ要素で2回呼び出すと、最初のアニメーションが終了せずに2番目のアニメーションが開始されると、問題が発生する可能性があることを指摘しています。これは、2番目のアニメーションが現在の（中間アニメーション）サイズを目的の「終了」値として取得し、それらを最終値として修正するために進むためです（「自然」サイズにアニメーションするのではなく、トラックでアニメーションを効果的に停止します） ）...

これを解決する最も簡単な方法は、stop()を呼び出す前に showHtml() を呼び出し、2番目のtrueを渡すことです（jumpToEnd）パラメーター：

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

これにより、新しいアニメーションを開始する前に、最初のアニメーションがすぐに完了します（まだ実行中の場合）。

47
Shog9

animate method を使用できます。

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

多分こんな感じ？

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

あなたが望むと思うものに近い、また、slideIn/slideOutを試すか、UI/Effectsプラグインを見てください。

6
lucas

これが私がこれを修正した方法です、これが役に立つことを願っています！アニメーションは100％スムーズです:)

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);
    });
});

私のコードの短いバージョンがあるかもしれませんが、私はこのようにそれを維持しました。

6
Daan

これは私のために仕事をします。 temp divに幅を追加することもできます。

$('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();
  });
});
1
A-P

dequeueを使用してjQueryアニメーションを滑らかにすることができます。新しいアニメーションを開始する前に、クラスの存在をテストします（ホバー時に設定され、mouseOutアニメーションコールバックで削除されます）。新しいアニメーションが開始されたら、デキューします。

簡単なデモです

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');
    });
});

デモは5つのフルハイト列として設定されています。列2から5のいずれかをクリックすると、他の3つの列の幅が切り替わり、クリックした要素が左端に移動します。

enter image description here

enter image description here

0
davidcondrey

こんにちはmeyahoocoma4c5ki0pprxr19sxhajsogo6jgks5dt。

'content div'を、絶対幅の値に設定された 'outer div'でラップできます。他の回答に示されている「hide（）」または「animate（{width}）」メソッドを使用して新しいコンテンツを挿入します。この方法では、ラッパーdivが一定の幅を保持するため、ページはその間にリフローしません。

0
micahwittman

Jqueryプラグインソリューションにピギーバックするには（これをコメントとして追加するには評判が低すぎる）jQuery.html（）は、追加されたhtmlのイベントハンドラーを削除します。変化：

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

に

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

「html」要素のイベントハンドラを保持します

0
snotbubblelou