php - 我如何有一个点击动画并显示 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

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

不知道你为什么要把它放在另一个函数中。那会做的。

Answer 3

您可以使用 jQuery 获得此信息。

1. 给你sign up link一个你想点击的ID。

2. 创建一个 div，它在您的链接下方有一些高度，并以您希望在用户单击链接时使其看起来的方式为其提供所有样式。

3. 给那个 div 一个 CSS 样式height: 0px，这样 div 就会消失。

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

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

Answer 4

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