Plan PME Carte animée V1

Les pointeurs grossissent tous en même temps

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();
    $('.pointeur-carte').animate({
        width: '38px',
        height: '32px'
    },800);
    $('.pointeur-carte').animate({
        width: '32px',
        height: '28px'
    },200);
});