使用同一张图片从右滑动进出div-JQuery

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

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