1

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

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

对于这种特定情况，我会使用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 过渡。

于 2012-06-15T20:31:47.550 回答