Question

这里我想创建一个下拉形式，点击元素有过渡效果，onClick它会触发转换，但是当我再次点击时它不会触发转换而只是隐藏div元素.... 演示：http://tryitnow.net16.net/

见下文：

功能：

<script>

$(function() {

    $("#login").click(function() {
        var visi= $(".User-Login").css('visibility');

        if(visi=="visible") {
            $(".User-Login").toggleClass("box-colap");
            $(".User-Login").css('visibility','hidden');    
        }
        else {
            $(".User-Login").css('visibility','visible');
            $(".User-Login").toggleClass("box-change"); 
        }       
    });
});

html：

<table class="MainMenu" style="width:100%;background-color:white" align="center">
<a href="#">Home</a>
        &nbsp;
        &nbsp;
        </td>
        <td>
        <a href="#">How It Works </a>
        </td>
        <td>
        <a href="#"> Features</a>
        </td>
        <td>
        <a href="#"> Why Us </a>
        </td>
        <td>
        <a href="#"> Sign Up </a>
        </td>
        <td>
        <a id="login" href="javascript:void(0);"> Login </a>
        </td>
</table>

的CSS：

 .User-Login {  

visibility:hidden;
position:absolute;
left:1150px;    


background:black;
-webkit-transition:  height 2s ease;  
-moz-transition:  height 2s ease;  
-o-transition: height 2s ease;  
-ms-transition: height 2s ease;  
transition:, height 2s ease;  
overflow:hidden;


height:10px;

 top:90px;

}  

.box-change {   
height: 250px;  
}

.box-colap {
height:10px;
}

Answer 1

css3的两个简单解决方案，你甚至不需要jquery

fiddle 1

fiddle 2

两者都在使用css3

这是滑动的实际css代码

div{
display:block;
height:120px;
width:120px;
background:red;
}

.hideUp{
    position:relative;
    height:200px;
    width:200px;
    background:blue;
    display:block;
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
}

.hideUp:focus{
    top:-200px;
}

和html

<a href="#" tabindex="-1" class="hideUp"><div><p>CLICK TO MOVE</p></div></a>

：）

onClick过渡和切换div元素的可见性

1 个答案: