jquery - jQuery を使用した要素のタイム スライド

Question

ページが読み込まれてから 10 秒後に要素のスライドを残したいと思います。しかし、ページから完全に消えたくありません。200pxスライドさせたいだけです。次に、残りの表示部分をクリックすると、右にスライドして戻ります。

距離を設定する方法がよくわかりません...これが私がこれまでに持っているものです：

$("#myEl").click(function(){
    $(this).animate({width:'toggle'},500);
});

Answer 1

$("#myEl").click(function(){
    if ($(this).hasClass('left')) {
        $(this).animate({ left: '+=200' }, 500).removeClass('left');
    } else {
        $(this).animate({left:'-=200'}, 500).addClass('left');
    }
});

これを示すJSFiddle を作成しました。

Answer 2

試す、

$(function () {
   var $myEl = $('#myEl');
   var orgPos = $myEl.position().left;

   $myEl.click(function(){
      //Moves to origPos after click
      $(this).stop(true, false).animate({left: orgPos},500); 
   })
   .animate({left: '-=200'}, 10000); //Animates for 10 secs
});

編集: DEMO <-- 大きな div で更新

Answer 3

jsBin デモ

function tabHide(){                             // define a 'HIDE' function
  $('#tab').stop().animate({left:-150},1000); 
}

function tabShow(){                             // define a 'SHOW' function
  $('#tab').stop().animate({left: -1 },1000);
}

// Now let's play with this functions:

setTimeout(function(){                          // run 'HIDE' after 10"
  tabHide();
},10000);

$('#tab').toggle(function(){                    // click toggle 'SHOW' / 'HIDE'
   tabShow();
},function(){
   tabHide();
});

jQuery .toggle()
jQuery .stop()