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在点击时是否不可见，并根据它选择要执行的动画。

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

1 个答案: