Plan PME Carte animée V2

Les pointeurs grossissent les uns après les autres, rapidement

by Jean-Baptiste Audras

HTML

<a href="#">Lancer l'anim'</a>
<div class="fondcarte">
    <div class="pointeur-carte pointeur-07"></div>
    <div class="pointeur-carte pointeur-26"></div>
    <div class="pointeur-carte pointeur-38"></div>
    <div class="pointeur-carte pointeur-01"></div>
    <div class="pointeur-carte pointeur-42"></div>
    <div class="pointeur-carte pointeur-69"></div>
    <div class="pointeur-carte pointeur-73"></div>
    <div class="pointeur-carte pointeur-74"></div>
</div>

CSS

.fondcarte {
    position: relative;
    width: 300px;
    height: 378px;
    margin: 50px auto 0 auto;
    padding: 0;
    background: #fff url(http://clients.atelier-111.fr/planpme/integration/images/carte-presentation.jpg) no-repeat;
}
.pointeur-carte {
    position: absolute;
    width: 0px;
    height: 0px;
    background: url(http://clients.atelier-111.fr/planpme/integration/images/pointeur-carte.png) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
}
.pointeur-07 {
    top: 220px;
    left: 60px;
}
.pointeur-26 {
    top: 230px;
    left: 120px;
}
.pointeur-38 {
    top: 160px;
    left: 150px;
}
.pointeur-01 {
    top: 70px;
    left: 140px;
}
.pointeur-42 {
    top: 110px;
    left: 30px;
}
.pointeur-69 {
    top: 115px;
    left: 90px;
}
.pointeur-74 {
    top: 80px;
    left: 200px;
}
.pointeur-73 {
    top: 140px;
    left: 220px;
}

JavaScript

$('a').click(function(event){
    event.preventDefault();
    //$('.fondcarte').hide();
    //$('.fondcarte').slideDown('500');
    $('.pointeur-07').animate({width: '38px',height: '32px'},200, function() {
     $('.pointeur-07').animate({width: '32px',height: '28px'},100, function() {
      $('.pointeur-26').animate({width: '38px',height: '32px'},200, function() {
       $('.pointeur-26').animate({width: '32px',height: '28px'},100, function() {
        $('.pointeur-01').animate({width: '38px',height: '32px'},200, function() {
         $('.pointeur-01').animate({width: '32px',height: '28px'},100, function() {
          $('.pointeur-73').animate({width: '38px',height: '32px'},200, function() {
           $('.pointeur-73').animate({width: '32px',height: '28px'},100, function() {
            $('.pointeur-38').animate({width: '38px',height: '32px'},200, function() {
             $('.pointeur-38').animate({width: '32px',height: '28px'},100, function() {
              $('.pointeur-42').animate({width: '38px',height: '32px'},200, function() {
               $('.pointeur-42').animate({width: '32px',height: '28px'},100, function() {
                $('.pointeur-74').animate({width: '38px',height: '32px'},200, function() {
                 $('.pointeur-74').animate({width: '32px',height: '28px'},100, function() {
                  $('.pointeur-69').animate({width: '38px',height: '32px'},200, function() {
                   $('.pointeur-69').animate({width: '32px',height: '28px'},100, function() {
                   });
                  });
                 });
                });
               });
              });
             });
            });
           });
          });
         });
        });
       });
      });
     });
    });
});