34

とても簡単かもしれませんが、まだ学ぶべき例がないので、ご容赦ください。;）

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

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

.... 

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

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

考え？

4

8 に答える 8

47

この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()前に を呼び出し、 2 番目の ( jumpToEnd ) パラメータshowHtml()を渡すことです。true

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

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

于 2008-10-28T23:56:42.920 に答える
43

animate メソッドを使用できます。

$("div").animate({width:"200px"},400);
于 2008-10-28T21:51:39.177 に答える
6

多分このようなものですか？

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

私があなたが望んでいたものに近い、slideIn/slideOut を試すか、UI/Effects プラグインを見てください。

于 2008-10-28T20:57:37.040 に答える
6

これが私がこれを修正した方法です。これが役立つことを願っています! アニメーションは 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);
    });
});

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

于 2009-01-24T11:29:49.567 に答える
1

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

$('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();
  });
});
于 2011-05-12T01:05:34.290 に答える
0

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」要素のイベントハンドラを保持します

于 2014-12-17T20:47:58.647 に答える
0

こんにちは、meyahoocoma4c5ki0pprxr19sxhajsogo6jgks5dt。

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

于 2008-10-28T22:08:12.560 に答える
0

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

ここに簡単なデモがあります。

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 つのトグル幅がアニメートされ、クリックされた要素が左端に移動します。

ここに画像の説明を入力

ここに画像の説明を入力

于 2014-11-26T01:30:20.790 に答える