Simuler le déplacement d'un point a à b sur un background

ahlysee
Javascript

Bonjour à tous !
Suite à un sujet précédemment posté iciet résolu par Makai, je pensais à l'adapter à des sprites.
En effet, en repartant sur la base de :

<nav>
        <a href="#" data-flag="x y">Paris</a> <!-- x étant la position sur l'axe des x et y sur l'axe des y -->
        <a href="#" data-flag="x y">Londres</a>
        <a href="#" data-flag="x y">Madrid</a>
</nav>

Puis en définissant dans le css : 

<style>
nav {
    background-image: url("mapMonde.png"); // L'image est très grande
        background-position: x y;
    width: 200px;
    height:200px;
    display:block;
}
</style>

Et enfin avec le jquery : 

<script>
$(document).ready(function(){
        var bg = $("nav").css("background-position");
        $("a").hover(
                function() { $("nav").css("background-position", $(this).attr("data-flag")); },
                function() { $("nav").css("background-position", bg); }
        );     
});
</script>

On a normalement le changement de zone, mais c'est très abrupt.
Est-ce possible de faire comme une transition entre le point a et le point b ? (avant de passer la souris sur la ville et quand on passe la souris sur la ville)
Sinon, pensez-vous qu'il existe une autre solution ?
Merci :)

3 réponses

Makai
Réponse acceptée

Je te laisse aller voir la fonction animate de jQuery : http://api.jquery.com/animate/

Encore moi
:p

ahlysee
Auteur
Réponse acceptée

Bon alors ça marche mais il faut télécharger un script (bgpos.js) ici.
Puis utiliser les données suivantes :

<script type="text/javascript">
$(document).ready(function(){
        var bg = $("nav").css("background-position");
        $("a").hover(
                function(){$("nav").animate({backgroundPositionX:0,backgroundPositionY:100});},
                function(){$("nav").animate({backgroundPositionX:100,backgroundPositionY:100});}
        );    
});
</script>

cependant, je n'ai pas encore testé si à la place des nombres on peut mettre des variables, sinon je devrai faire des conditions avec if.

ahlysee
Auteur

Han en anglais xD bon je vais lire ça ! je dois surement le mettre "autour" de chaque fonctions dans le hover ?
Encore merci :p