Comment utiliser JQuery de sorte que lorsqu'un utilisateur clique dessus, une couleur soudaine apparaît?

Question

<a href="/list" onclick="????"> 
    <div> 
LOTS OF INFO HERE 
LOTS OF INFO HERE 
LOTS OF INFO HERE 
LOTS OF INFO HERE 
    </div> 
</a> 

J'ai une div, qui est à l'intérieur d'un lien hypertexte. Le div entier est cliquable. Lorsque l'utilisateur clique sur cette grande div, je voudrais que l'ensemble de la div devienne bleu clair, puis se fondre lentement dans le blanc. Cela donnera à l'utilisateur le sentiment qu'il clique dessus!

Merci.

Answer 1

Vous n'avez pas besoin de la div dans l'ancre pour cela.

J'utiliserais le plugin Color Animations de jQuery pour cela. De this page, cliquez sur le bouton "Animate Boxes" pour voir l'effet que vous avez mentionné.

Une fois que vous avez ce plugin référencé, la syntaxe est assez simple:

$(".myDiv").click(function(){ 
    $(this).stop() 
    .css("background-color", "blue").animate({"background-color":"white"}, 3000); 
}); 

<div class="myDiv">click me to make the magic happen</div> 

Démo en ligne: http://jsbin.com/ohire/2 (cliquez sur le texte)

Answer 2

la div dans l'ancre est mauvais balisage . Si l'arrière-plan est blanc, vous pouvez également animer l'opacité. Si je créais cet effet, je l'animerais en bleu puis en blanc sur le rappel. il donne un bon effet de timing opposé à l'instant dans votre visage bleu puis blanc .... Essayez comme 500 dans la vitesse ou plus et 4000 out.