jquery - 使用 .animate 切换 div

Question

到目前为止，我有以下代码：

$('div.welcome-handle').click(function() {
        top.$('#welcome-message').toggle(function() {
            $(this).animate({"left": "-=749px"}, 500);
        },
        function() {
            $(this).animate({"left": "+=749px"}, 500);
        });
    });

我需要能够单击 .welcome-handle 以将#welcome-message 隐藏在屏幕外，然后能够再次单击 .welcome-handle 以将其恢复到原始位置。

上面的代码执行第一部分，然后在第二次单击时显示#welcome-message 并将其滑回以隐藏它。我怎样才能做到这一点：（#welcome 句柄绝对定位在屏幕上）

点击事件 - 滑动 div -749px 点击事件 - 滑动 div +749px 等等...

Answer 1

您可以实现自己的切换。你可以阅读jQuery toggle 的文档。

   var isShow = true;
    $('div.welcome-handle').click(function() {
          if(!isShow){
            isShow= true;
            top.$('#welcome-message').animate({"left": "-=749px"}, 500);
           }else{
             isShow= false;
             top.$('#welcome-message').animate({"left": "+=749px"}, 500);
        });

Answer 2

检查 div 是否隐藏，我建议您缓存 dom 对象，以便减少 dom 操作。

var CurrDivObject=$('#welcome-message'); //cached object

//你的代码

$('div.welcome-handle').click(function() {
        top.$('#welcome-message').toggle(function() {
            if($(CurrDivObject).is(":hidden")) // Show the div
            $(this).animate({"left": "-=749px"}, 500);
        },
        function() {
            if($(CurrDivObject).is(":visible")) // hide the div
             $(this).animate({"left": "+=749px"}, 500);
        });
    });