Tutoriaux

Animer vos boites de messages avec jQuery

Administrateur

Déc 15 |14:51

Il y a quelques temps déjà, nous vous avons proposé un article sur la création de boites de message. Le but de l'article était d'ajouter une touche de design à ces boites, mais surtout d'attiré l'attention de vos lecteurs sur ces dernières. Bref, nous allons voir ici comment il est possible d'ajouter encore plus de visibilité à vos boites de messages grâce à jQuery. Comment me direz-vous ? Et bien en animant un peu ces dernières!

Boite de message

<div id="info">
Ceci est une boite de message animé!<a href="#" class="close">Fermer la boite de message!</a>
</div>

#info{
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    position:relative;
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('icon.png');
}

Animation

Clignotement de la boite de message

$(document).ready(function(){
    $(".close").click(function(){
        $("#info").animate({left:"+=10px"}).animate({left:"-5000px"});
    });
    $("#info").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400)
    .fadeOut(400).fadeIn(400);
});

Secouer la boite de message

$(document).ready(function(){
    $(".close").click(function(){
        $("#info").animate({left:"+=10px"}).animate({left:"-5000px"});
    });
    $("#info").animate({left:"+=5px"},40).animate({top:"+=5px"},40)
    .animate({top:"-=10px"},40).animate({left:"-=10px"},40)
    .animate({top:"+=5px"},40).animate({left:"+=5px"},40)
    .animate({left:"+=5px"},40).animate({top:"+=5px"},40)
    .animate({top:"-=10px"},40).animate({left:"-=10px"},40)
    .animate({top:"+=5px"},40).animate({left:"+=5px"},40);
});

Envoyer par mail

Vu: 1512

Commentaires (0) Add Comment

Flux RSS pour les commentaires

Ecrivez un commentaire

Navigation

Réseaux sociaux

Connexion

Publicités

MeilleursPrix.ca

Services offerts

Développement Web

Que ce soit pour faire la conception d'un site Web ou pour la refonte d'un site existant, nous avons la solution.

La création et la conception Web sont au cœur de nos activités. Chaque concept et création sont différents, et chaque client est unique. Rien n’est laissé au hasard pour faire de votre création multimédia un outil unique de promotion.

Plus

Développement Windows

Quel que soit votre projet, nous pouvons le réaliser pour vous !

Grâce à notre expertise en programmation, nous sommes en mesure de concevoir une variété d’applications qui pourront vous permettre d’augmenter votre clientèle, de la fidéliser ou encore de réduire vos coûts d’opération ! Nos critères élevés de contrôle de qualité ainsi que la grande expertise de nos programmeurs et de nos chargés de projets contribuent au succès des mandats qui nous sont confiés.

Plus

Base de données

...

Plus

Autres

Quel que soit vos projets ou vos idées, contactez nous!

Grâce à notre expérience et notre expertise en informatique, nous serons en mesure d'évaluer vos projets et nous pourrons trouver une solution à vos problèmes. Que ce soit de la programmation ou de la base de données ou bien tout autres problèmes informatiques, contactez nous, nous serons là pour vous.

Plus