1

クリックすると、ページの一部をオーバーレイする追加コンテンツを表示する大きな 600px x 100px のバナーに「展開」する小さな 16px の正方形のアイコンを作成したいと思います。次に、ユーザーがバナーの閉じるボタンをクリックすると、アイコンに「折りたたまれ」ます。

基本的に、これからスムーズにアニメーション化する機能を探しています:

------------------------------------------------------------------
|                                                                |
|                                                       [icon]   |
|                                                                |
|                                                                |
|          Page content here                                     |
|          more page content here                                |
|          even more page content here                           |
|          yet more more page content here                       |
|          another line of page content                          |
|          and another.                                          |
|                                                                |
|                                                                |

これに：

------------------------------------------------------------------
|                                                                |
|   ----------------------------------------------------------   |
|   |                                                    [x] |   |
|   |                                                        |   |
|   |      Content inside banner                             |   |
|   |      goes here                                         |   |
|   |                                                        |   |
|   ----------------------------------------------------------   |
|          another line of page content                          |
|          and another.                                          |
|                                                                |
|                                                                |

そして、ユーザーが閉じるボタンをクリックすると、再びアニメーション化されます。

優れたパフォーマンスとブラウザの互換性を備えたjqueryでこれを行う良い方法は何ですか?

私のアプリのユーザーのほとんどは下位レベルのブラウザを使用しているため、どのソリューションも IE7+、iPad2+、および最新のデスクトップおよびモバイル ブラウザで動作するはずです。

4

2 に答える 2

1

jsFiddle: http://jsfiddle.net/ZAJN4/48/

<div id="1" class="toggle" style="width:50px;height:50px;background:green;">
    <div id="icon1" style="background:blue;height:100%;width:100%;">Icon</div>
    <div id="content1" style="display:none;background:red;height:100%;width:100%;">Content</div>
</div>​

$(".toggle").click( function()
{
    var icon =  $("#icon" + $(this).attr("id"));
    var content = $("#content" + $(this).attr("id"));

    if ( icon.css("display") == "none" )
    {
        $(this).animate(
        {
            height: "50px",
            width: "50px"
        }, function() {});
    }
    else
    {
        $(this).animate(
        {
            height: "250px",
            width: "250px"
        }, function() {});
    }

    $(icon).animate(
    {
        height: 'toggle'
    }, function() {});

    $(content).animate(
    {
        height: 'toggle'
    }, function() {});
});​
于 2012-06-15T21:05:48.780 に答える
0

この特定のケースでは、16 ピクセルの正方形から 600x100 ピクセルの長方形に拡張するabsolutely 位置の を使用します。div

CSS3 トランジションを使用してアニメーション化できます。

.foobar {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 0;
  right: 0;
  transition: all 0.4s ease-out;
}

.foobar.expanded {
  width: 600px;
  height: 100px;
}

四角形をクリックすると、次のようにexpandedクラスを追加し、それを削除してdiv折りたたむだけです (jQuery を使用してイベントを管理します)。

$('.foobar').on('click', function (event) {
  event.preventDefault();
  $(this).toggleClass('expanded');
});

またはjQueryの.animate()：

$('.foobar').on('click', function (event) {
  event.preventDefault();
  var $this = $(this);
  if ($this.width() === 600) {
    $this.animate({
      width : 16,
      heigth : 16
    }, 400);
  } else {
    $this.animate({
      width : 600,
      height : 100
    }, 400);
  }
});

これをベース CSS として使用する:

.foobar {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 0;
  right: 0;
}

ご覧のとおり、実装は非常に簡単です。

原則として、CSS トランジションは JavaScript を使用して作成されたアニメーションよりもはるかに優れています。欠点は、古いブラウザーがそれらをサポートしていないことです。個人的には、CSS トランジションを使用します。

于 2012-06-15T20:31:47.550 に答える