如何点击动画并显示div？

Question

所以我有一个栏，我想要sign up link，当你点击它时，会显示链接左侧的一些文字链接。

下面有一些前后视觉效果。

我尝试了一些javascript但是没有达到目标，我希望它能够动画出来，但如果我无法弄清楚它现在还可以。有什么想法吗？

Answer 1

也许你可以使用：target伪类选择器和一些CSS3过渡？在这种情况下，当您单击链接时，div的不透明度会更改并使其可见。我不确定您需要支持哪些浏览器？这在IE 7或8中不起作用。

以下是转换的代码：

HTML

<a href="#id1">Sign Up</a>

CSS

#id1 {

    opacity: 0;    
}


#id1:target {
    -webkit-transition: opacity 0.5s ease-in-out;
       -moz-transition: opacity 0.5s ease-in-out;
         -o-transition: opacity 0.5s ease-in-out;
                                      opacity: 1;

演示 - jsFiddle

编辑：这是我快速制作的第二个例子（幻灯片效果），因此它不能顺利运行，但它至少显示了可能的内容 - jsFiddle2（webkit）。

Answer 2

您可以尝试使用jquery

$(function() {
$('#id').click(function(e){
    e.preventDefault();
    $("#id2").animate({height : '410'}; /* what ever the styles u need */


});

})

试试这个链接

http://www.w3schools.com/jquery/jquery_effects.asp

http://api.jquery.com/animate/

http://viralpatel.net/blogs/understanding-jquery-animate-function/

Answer 3

$(document).ready(function()
{
 $('#id').click(function(e){
   e.preventDefault();
   $("#id2").animate({height : '410'}; /* what ever the styles u need */
 });
});

不知道为什么要把它放在另一个功能中。那样做。

Answer 4

你可以使用jQuery获得这个。

1. 为您要点击的sign up link提供身份证明。

2. 创建一个div，它在链接下方有一些高度，并以用户点击链接时想要显示的方式为其提供所有样式。

3. 给该div一个css样式height: 0px，以便div现在消失。

4. 当用户点击链接时，使用jQuery .animate()函数切换（或更改）该div的高度。

您可以在此处引用jQuery .animate()文档：http://api.jquery.com/animate/。