javascript - 如何在div点击上添加css动画

Question

我正在尝试制作显示/隐藏动画。第一个 div 将第一次显示和第 2 个 div 隐藏然后当我将“详细信息”按钮在第一个 div 中然后显示第 2 个，当我单击第 2 个 div 中的“关闭”按钮时显示第一个 div 并隐藏第 2 个 div。我这样做没问题，但我想添加一些 css 效果，当它显示和隐藏示例时，例如http://tympanus.net/Tutorials/OriginalHoverEffects/index7.html有很多很酷的效果都基于我想要的翻转效果这在我的点击..你能猜猜我该怎么做..

这里的基本示例：http: //jsfiddle.net/Q5e76

$("#details").click(function () {
    $(".one").hide();
    $(".two").show();
});

$("#close").click(function () {
    $(".two").hide();
    $(".one").show();
});

Answer 1

而不是使用.show();and.hide();你可以使用.fadeIn(n)and.fadeOut();

n它将花费的毫秒数在哪里。

例如

$('.one').fadeOut(500); // half a second.

PS：如果这些是唯一的，您应该给它们 ID 以防止在多个元素上执行交互。

如果你给你的元素起正确的名字，它也会帮助你自己。

例如id="detail-box"，例如。