如何在div点击上添加css动画答案

【问题标题】：how to add css animation on div click如何在div点击上添加css动画
【发布时间】：2013-10-27 11:08:52
【问题描述】：

我正在尝试制作显示/隐藏动画。第一个 div 将第一次显示，第二个 div 隐藏然后当我将“详细信息”按钮在第一个 div 中然后显示第二个，当我单击第二个 div 中的“关闭”按钮时显示第一个 div 并隐藏第二个 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();
});

【问题讨论】：

CSS 不会点击。您需要使用 JavaScript 或服务器端解决方案。 tympanus.net/codrops/2012/12/17/css-click-events
尝试使用 jquery/javascript 查看 slideToggle 或 .animate({ width : 'toggle' })
另外，请不要使用代码标签绕过 SO 政策。

标签： javascript jquery css animation show-hide

【解决方案1】：

您可以使用.fadeIn(n) 和.fadeOut();，而不是使用.show(); 和.hide();

其中n 是所需的毫秒数。

例如

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

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

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

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

【讨论】：