0

これまでのところ、次のコードがあります。

$('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 をクリックして元の位置に戻すことができるようにする必要があります。

上記のコードは最初の部分を実行し、2 回目のクリックで #welcome-message を表示し、スライドして非表示にします。これを行うにはどうすればよいですか: (#ウェルカムハンドルは画面上に絶対配置されています)

クリック イベント - スライド div -749px クリック イベント - スライド div +749px など...

4

2 に答える 2

0

独自のトグルを実装できます。jQueryトグルのドキュメントを読むことができます。

   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);
        });
于 2012-09-28T11:13:28.263 に答える
0

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);
        });
    });
于 2012-09-28T11:25:50.713 に答える