jquery 从（并折叠成）一个小方块展开

Question

我想创建一个 16 像素的小方形图标，单击该图标时，它会“展开”成一个 600 像素 x 100 像素的大横幅，显示覆盖部分页面的其他内容。然后用户可以单击横幅上的关闭按钮，它将“折叠”回图标中。

本质上，我正在寻找一种能够顺利制作动画的能力：

------------------------------------------------------------------
|                                                                |
|                                                       [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+ 以及现代桌面和移动浏览器——尽管如果旧浏览器的性能很糟糕，我可能会放弃那里的动画。

Answer 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() {});
});​

Answer 2

对于这种特定情况，我会选择 absolutely 定位 div，它从 16 像素的正方形扩展到 600x100 像素的矩形。

您可以使用 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 过渡。