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()