How can I use JQuery so that when a user clicks on this, a sudden color appears?

Question

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

I have a div, which is inside a hyperlink. The whole div is clickable. When the user clicks on this big div, I would like the entire div to turn light blue, and then slowly fade into white. This will give the user a feeling that he's clicking it!

Thanks.

Answer 1

You won't need the div within the anchor for this.

I would use jQuery's Color Animations plugin for this. From this page, click the "Animate Boxes" button to see the effect you mentioned.

Once you have that plugin referenced, the syntax is rather 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>

Online Demo: http://jsbin.com/ohire/2 (click the text)

Answer 2

the div inside the anchor is bad markup. if the background is white you could also animate opacity. if I were creating this effect I would animate it to blue then back to white on the callback. it gives a good timing effect opposed to instant in your face blue then white....try like 500 in on speed or so and 4000 out.