Question

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

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

在随后的鼠标输出中，它会向左返回并再次消失。

除非用户将鼠标放在最初出现在页面上的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

要可靠地等待初始动画完成，您可以将其指定为.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

Answer 3

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

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

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

页面加载时的鼠标位置是否会抛弃jQuery？

3 个答案: