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

而不是设置间隔，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（上面的鼠标悬停工作）会有点困惑

对于没有鼠标悬停的加载来启动动画，那么你只需使用鼠标触发的代码......

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

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

jQuery背景动画开始窗口加载

1 个答案: