jQuery背景动画开始窗口加载

Question

我有以下代码:

$(document).ready(function() {
    $('#header_title').mouseover(function() {
        $(this).fadeTo('slow', .8);
    });
    $('#header_title').mouseleave(function() {
        $(this).fadeTo('slow', .5);
    });
    $('#header_banner').mouseover(function(){
        var x = 0;  
        var y = 0;
        var banner = $('#header_banner'); 
        banner.css('backgroundPosition', x + 'px' + ' ' + y + 'px');
        window.setInterval(function() {
            banner.css("backgroundPosition", x + 'px' + ' ' + y + 'px');  
            y--;
        }, 90); 
    });
});

我想让我的#header_banner在文档加载后自动开始移动。当我把鼠标移到#header_banner上的时候，每次我把鼠标移到它上面，它都会开始整个动画过程，所以我想让它开始并一直持续到文档加载结束。

Answer 1

与set interval不同，jQuery有一个动画函数https://api.jquery.com/animate/

$('#header_banner').mouseover(function(){
    var banner = $('#header_banner');
    banner.css('backgroundPosition', '0 0');
    banner.animate({
        backgroundPosition: '-90 -90'
    }, 3000); // ie takes 3 second to complete
});

但是如果你想让动画开始onload或onmouseover(上面的工作是onmouseover)

对于on load without mouse over来启动动画，那么你只需使用带有mouse over trigger的代码…

$(document).ready(function () {    
    $('#header_banner')
        .css('backgroundPosition', '0 0')
        .animate({
            backgroundPosition: '-90 -90'
        }, 3000); // ie takes 3 second to complete
});

在这个例子中，我使用了链接来设置css和动画