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/

悬停时滑出？

2 个答案: