Question

需要一些JQuery帮助...

我想从右边滑动一个div，占据屏幕宽度的25％。如何使用相同的'＃trigger-left a'滑出div？（即宽度：0px）

JQuery的：

$(function() { 
    $("#trigger-left a").click(function(){
        var rightCol = $("#right-col");
            rightCol.animate({width:'25%'},350);
        return false;
    });
});

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>

期待您的解决方案！

Answer 1

试试这个：

 $(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;
    });
 });

Answer 2

最简单的方法就是跟踪它所处的状态。这样可以保持方向前进，如果使用宽度，如果在转换过程中点击则可能无法实现。

$(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;
    });
});

Answer 3

如果您的意思是点击相同的链接，div将会滑出。你在这里：

$(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);
        }
    });
});

尝试一下，如果它不起作用，我会编辑我的答案。祝你好运;）

使用相同的图像从右侧滑入和滑出div - JQuery

3 个答案: