如何动画/显示隐藏的div？

Question

所以我试图在点击链接时显示一个带有切换转换的 div。

我的代码：

  $("nav ul li#about a").click(function (e) {
    $("div#about").slideToggle(200);
    e.preventDefault();
});

效果很好，但我想要这个效果： http://ricostacruz.com/jquery.transit/ 向下滚动并找到“其他属性的转换”。你看到规模效应了吗（第一个演示框）？这就是我想要的，而不是 slideToggle。所以我想要这种与 TOGGLE 类似的效果...点击链接时转换 IN 和 OUT。

希望你们能帮帮我:)

Answer 1

jQuery 的 slideToggle 方法实际上只是对 animate 的精美包装。由于这个传输插件模仿animate 语法，我们可以很容易地构建一个切换。

$("nav ul li#about a").click(function (e) {
    e.preventDefault();
    var about = $("div#about");
    if (about.css('opacity') == 0) {
        about.transition({ opacity: 1.0, scale: 1.0 });
    } else {
        about.transition({ opacity: 0.0, scale: 1.6 });
    }
});

我还没有测试过这段代码，但它应该检查 about div 在点击时是否不可见，并根据它选择要执行的动画。