fade out <a href> element

Question

I'm trying to face a particular class .mosaic-block to fade on clicking this:

<a href="#">
  <div id="t0" class="n0 lfloat"><img src="images/home.png"><br>Home</div>
</a>

My Jquery code is:

<script type="text/javascript">
$(function () {
$('a #t0').click(function() {
  $(".mosaic-block").animate({ 
        opacity: 0.0
        }, 1500 );
    }); 
});
</script>

But I'm not getting the desired results.

EDIT#1 My .mosain-block HTML code:

<div class="mosaic-block bar">
    <h4>Sloppy Art</h4>
    <p>abcd</p>
</div>

Answer 1

Your code is fine.

You can see it in action here.

So the error is elsewhere. For example in the jQuery import (yes, I got a hint on this one ;) ) which could look like this :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Answer 2

Why not use the inbuilt fadeOut() method

$(".mosaic-block").fadeOut(1500);