[英]onClick transition and toggle visibility on div element
Here I want to create a dropdown form with transition effect on click of element, onClick it triggers the transition but when I click again it doesn't triggers the transition instead it just hides the div element.... Demo: http://tryitnow.net16.net/ 在这里,我想创建一个具有单击元素的过渡效果的下拉表单,onClick会触发过渡,但是当我再次单击时,它不会触发过渡,而是仅隐藏div元素。...演示: http:// tryitnow.net16.net/
See below: 见下文:
function: 功能:
<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: 的HTML:
<table class="MainMenu" style="width:100%;background-color:white" align="center">
<a href="#">Home</a>
</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: 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;
}
Two simple solutions from css3 you don't even need jquery 来自CSS3的两个简单解决方案甚至不需要jquery
both are using css3 两者都使用css3
here's the actual css code for sliding 这是滑动的实际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;
}
and the html 和HTML
<a href="#" tabindex="-1" class="hideUp"><div><p>CLICK TO MOVE</p></div></a>
:) :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.