2

5 つの画像すべてがラップせずanimate()にコンテナーの幅の 100% を消費するまで、jQuery が各画像を連続して展開するDIV 全体に 5 つの画像のパネルを作成しようとしています。

問題へのリンクは次のとおりです。

最初のブロック UI は正常に表示されますが、有効期限が切れて通常のページが表示されると、同じ 5 つの画像が一部の解像度 (FF または IE でテストするために ctrl-+/- を使用) で完全に表示され、他の画像では最後の画像が表示されます。ラップします。

サイズ変更をアニメーション化するコードを以下に示します。その目的は、コンテナーの幅の最大 20% まで各画像のサイズを変更することです。丸めと関係があるかどうかを確認しようとしましたが、空になりました。次のいくつか/すべてを試して、CSSオプションを調べました。

overflow:hidden;
white-space: nowrap;
display:inline-block;


$(".service_img").each(function (i) 
  {
    // if the image in question's width is > 20% of its container then re-adjust it to be 20% so it will fit
    if($('#'+this.id).outerWidth() > Math.floor((($('#services_imgs_container').outerWidth()/5)))){
      $('#'+this.id).width(Math.floor(($('#services_imgs_container').outerWidth()/5)));
    }
    else {
      $('#'+this.id).animate({width:(Math.floor(($('#services_imgs_container').outerWidth()/5)))},{duration:500, queue:false});
      //$('#'+this.id).animate({width:'19.2%'},{duration:500, queue:false});
      $('#'+this.id).show();
    }

  })
4

1 に答える 1

0

サイズ変更後に関数を記述し、#services_imgs_container が div.service_img:eq(0) の高さの 2 倍であるかどうかを確認できます。ステートメントが真でなくなるまで、各 .service_img のサイズを一度に 1 ピクセルずつ減らします。

このようなもの

while($('#services_imgs_container').height() >= ($('.service_img:eq(0)').height() * 1.5))
{
    $('.service_img').css('width': '-=1');
}
于 2012-10-04T23:47:04.913 に答える