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 demonstrating this。

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＆lt; - 更新了更大的div

Answer 3

jsBin demo

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

使用jQuery定时元素幻灯片

3 个答案:

jsBin demo