页面加载时的鼠标位置偏离 jQuery？

Question

我有一个小 header 需要从页面顶部进入，然后淡入淡出并向右移动。

当用户将鼠标悬停在 header 上时，它淡出并位于右侧后，它应该淡入并向左移动以显示更多信息。

在随后的鼠标移出时，它会回到左侧并再次淡出。

一切正常，除非用户在 div 最初出现在页面上时将鼠标悬停在上面。如果是这种情况，第一个被触发的 jQuery 事件就是 mouseout 事件。并且 div 被设置为太靠右 200px。基本上将其完全移出页面。

我正在尝试使用 setTimeout 解决此问题，但它不起作用。

javascript:

<script type="text/javascript">
     $(document).ready(function() {
        setTimeout(function(){
            $('#special_box').animate({top: '+=100'}, 300);
        }, 2000);
        setTimeout(function(){
            $('#special_box').fadeTo('slow', .3).animate({right: '-=200'}, 300);
        }, 10000);

        setTimeout(function(){
            $('#special_box').mouseover(function() {
                $(this).fadeTo('fast', 1).animate({right: '+=200'}, 300);
            });
            $('#special_box').mouseout(function(){
                $(this).fadeTo('fast', .3).animate({right: '-=200'}, 300);
            });
        }, 12000);
    });
</script>

css:

.special_box    {z-index: 7;
            height: 30px;
            width: 400px; 
            position: fixed;
            display: block;
            padding: 5px;
            top:-100px;
            right:0px;}

html:

<div class="special_box" id="special_box">
    Hello Cleveland!
</div>

Answer 1

尝试使用 .delay()。它延迟了函数的执行。

查看完整文档here.

示例：

$(document).ready(function(){
    $('.example').slideUp(200).delay(1000).fadeIn(400);
});

Answer 2

您可以使用 classes，然后您可以使用 .addClass() 方法。

在 div 加载动画后使用 .addClass('yourClassName'); 并为新的 class 制作 mouseover 和 mouseout。

$('.yourClassName').on('mouseover',function(){
   // Your code here
});

Answer 3

要可靠地等待初始动画完成，您可以将其指定为 .delay().animate().delay().fadeTo().animate().promise().then(fn) 链，并在回调 fn 中附加 mouseover/mouseout 处理程序。

完整：

$(document).ready(function() {
     var $special_box = $('#special_box');
     $special_box.delay(2000).animate({top: '+=100'}, 300).delay(8000).fadeTo('slow', .3).animate({right: '-=200'}, 300).promise().then(function() {
        $special_box.mouseover(function() {
            $special_box.fadeTo('fast', 1).animate({right: '+=200'}, 300);
        });
        $special_box.mouseout(function(){
            $special_box.fadeTo('fast', .3).animate({right: '-=200'}, 300);
        });
    });
});

您可能还想考虑：

为确保在初始动画出现之前加载图像，将 $(document).load(...) 换行而不是 $(document).ready(...)
为了更好地适应快速鼠标移动，在 mouseover/mouseout 处理程序中都包含 .stop()
为了更好的行为，响应 mouseenter/mouseleave 事件而不是 mouseover/mouseout

页面加载时的鼠标位置偏离 jQuery？

Mouse position on page load is throwing off jQuery?

html

css

jquery

mouseover

cursor