滑出懸停？

Question

$(document).ready(function() { 
 
    $("#slide").delay(5000).animate({right: 0}, 500); 
 
});

#slide { 
 
    position: absolute; 
 
    right: -155px; overflow:hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slide"><img src="pic.jpg"></div>

現在我的代碼正在與5秒的延遲，則照片從右側滑出。我需要改變它，所以它停留在「右：-155」的位置，直到你將鼠標懸停在圖像上。一旦你懸停，它應該滑出「0」，並在那裏約6秒。如果用戶移動鼠標，它應該回到原來的位置。

任何人都可以幫助我嗎？

Answer 1

嘗試：

$(document).ready(function() { 
    $("#slide").hover(function (e) { 
     $(this).stop().delay(5000).animate({ 
      right: e.type === "mouseenter" ? 0 : "-155px" 
     }, 500); 
    }); 
}); 

或切換一些類更好。

Answer 2

有點晚了比賽，我看你已經有了一個「工作」的答案，但是，想這樣的作品略勝一籌：

$('#slide').hover(function() { 
    $(this).stop(true, true).animate({right: 0}, 500); 
    timeout = window.setTimeout(function(){ 
     $('#slide').trigger('mouseleave');   
    }, 5000); 
},function(){ 
    window.clearTimeout(timeout); 
    $(this).animate({right: -500}, 500); 
}); 

這是在行動 - http://jsfiddle.net/w7ybb/