jQuery animation de l'arrière-plan

Question

J'ai créé une image qui est à la base une image-objet CSS composée de 3 images. Sa taille est 278x123 donc ils sont essentiellement 3 images de 278x41.

Ce que j'essaye de faire est de faire une animation de cela en changeant la position de fond.

J'ai essayé beaucoup de choses, un de mes pas la solution de travail très est la suivante:

var $slogan = $('#header h2 span'); 
$slogan.css({backgroundPosition: '0px 0px'}); 
function slogan_animation() { 
    if ($slogan.css('background-position') == '0px 0px') { 
     $slogan.fadeIn('slow').css('background-position', '0px -41px').fadeOut('slow'); 
    } 
    else if ($slogan.css('background-position') == '0px -41px') { 
     $slogan.fadeIn('slow').css('background-position', '0px -82px').fadeOut('slow'); 
    } 
    else if ($slogan.css('background-position') == '0px -82px') { 
     $slogan.fadeIn('slow').css('background-position', '0px 0px').fadeOut('slow'); 
    } 
} 
setInterval(slogan_animation, 2000); 

Toute idée comment pourrais-je le faire?

Fondamentalement, je dois juste: - définir ma position d'arrière-plan « 0px 0px », puis déplacez-le vers « 0px -41px », puis « 0px -82px », puis en boucle à nouveau de « 0px 0px ». Ce serait aussi génial d'avoir un effet fadeIn() entre ceux-ci.

Des idées?

Merci.

Answer 1

Le style background-position est un style composite, donc lorsque vous le lisez, il peut ne pas donner le résultat que vous attendez. En outre, le résultat peut différer entre les souffleurs. Essayez d'utiliser une variable pour garder une trace de la position au lieu de la lire dans le style. Définissez la position avant de démarrer le fondu:

$(function(){ 

    var $slogan = $('#header h2 span'); 
    var offset = 0; 

    window.setInterval(function(){ 
    $slogan.css('background-position', '0 -'+offset+'px') 
    .fadeIn('slow') 
    .fadeOut('slow'); 
    offset = (offset + 41) % 123; 
    }, 2000); 

});