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

Question

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

此处的基本示例:http://jsfiddle.net/Q5e76

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

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

Answer 1

除了使用 .show(); 和 .hide(); 你可以使用 .fadeIn(n) 和 .fadeOut();

其中 n 是它将花费的毫秒数。

例如

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

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

如果你给你的元素适当的名字，它也会帮助你自己。

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