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切换的docs。

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

使用.animate切换div

2 个答案: