如何点击动画并显示div?

时间:2012-07-21 05:45:31

标签: php javascript html css

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

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

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

enter image description here enter image description here

4 个答案:

答案 0 :(得分: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)。

答案 1 :(得分:0)

您可以尝试使用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/

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

你可以使用jQuery获得这个。

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

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

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

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

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