所以我有一个栏,我想要sign up link
,当你点击它时,会显示链接左侧的一些文字链接。
下面有一些前后视觉效果。
我尝试了一些javascript但是没有达到目标,我希望它能够动画出来,但如果我无法弄清楚它现在还可以。有什么想法吗?
答案 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获得这个。
为您要点击的sign up link
提供身份证明。
创建一个div,它在链接下方有一些高度,并以用户点击链接时想要显示的方式为其提供所有样式。
给该div一个css样式height: 0px
,以便div现在消失。
当用户点击链接时,使用jQuery .animate()
函数切换(或更改)该div的高度。
您可以在此处引用jQuery .animate()
文档:http://api.jquery.com/animate/。