[英]sliding in and out div from right using same image - JQuery
Need some JQuery help... 需要一些JQuery帮助...
I want to slide in a div from the right taking 25% of the screen width. 我想从右侧滑动div,占据屏幕宽度的25%。 How can I use the same '#trigger-left a' to slide out the div? 如何使用相同的“#trigger-left a”将div滑出? (ie width: 0px) (即宽度:0px)
JQuery: JQuery的:
$(function() {
$("#trigger-left a").click(function(){
var rightCol = $("#right-col");
rightCol.animate({width:'25%'},350);
return false;
});
});
HTML: HTML:
<div id="trigger-left"><a href="#"><img src="images/menu-icon.png" border="0"></a></div>
<div id="right-col">Content right column</div>
Looking forward to your solutions! 期待您的解决方案!
Try this: 尝试这个:
$(function() {
$("#trigger-left a").click(function(){
var rightCol = $("#right-col");
if(rightCol.width()==0)
{
rightCol.animate({width:'25%'},350);
}
else
{
rightCol.animate({width:'0%'},350);
}
return false;
});
});
Easiest way would be to just track what state it's in. In this way can keep direction going which may not be possible if clicked in the middle of a transition if using the widths. 最简单的方法是仅跟踪其处于什么状态。以这种方式可以保持前进的方向,如果使用宽度则在过渡的中间单击时可能无法实现。
$(function() {
var triggered = false;
$("#trigger-left a").click(function(){
var rightCol = $("#right-col");
if(!triggered){
rightCol.animate({width:'25%'},350);
triggered = true;
} else {
triggered = false;
rightCol.animate({width:'0%'},350);
}
return false;
});
});
If you mean by clicking the same link the div will slide out. 如果您是指单击同一链接,则div将滑出。 Here you are: 这个给你:
$(function () {
var div = $("#"right-col");
$("#trigger-left a").click(function (e) {
if ($(div).width() != 0) {
$(div).animate({width:'0px'},350);
} else {
$(div).animate({width:'25%'},350);
}
});
});
Try that if it didn't work I will edit my answer. 尝试如果它不起作用,我将编辑我的答案。 Good luck ;) 祝好运 ;)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.