fade out 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>

And just to be sure, because your selector is strange, do you have other elements with id t0 ? Because an id can only be used once. — Denys Séguret, Jan 04 '13 at 19:09
@dystroy: Really sorry, I forgot to load the `jquery.js` file .:P. Please add your answer so I can mark it correct.:) — xan, Jan 04 '13 at 19:19
You shouldn't have block elements inside an anchor. This is an HTML4.01 specification. Or that anchor's existence is just there to make the cursor a pointer, use a div and css. — Popnoodles, Jan 04 '13 at 19:34
@popnoodles Block-level anchors are now allowed in HTML5 and are actually working in any browser due to earlier implementations of that behavior through the vendors. — feeela, Jan 04 '13 at 19:42
They've always worked. We don't know if this is 4 or 5 but it's nice that they are allowed in 5. It still feels dirty tho! — Popnoodles, Jan 04 '13 at 19:47

score 4 · Accepted Answer · answered Jan 04 '13 at 19:22

4

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>

answered Jan 04 '13 at 19:22

Denys Séguret

372,613
87
782
758

Thanks. I misspelt the file name while loading the `jquery.js` file. – xan Jan 04 '13 at 19:25

Sushanth -- · Answer 2 · 2013-01-04T19:12:51.210

0

Why not use the inbuilt fadeOut() method

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

edited Jan 04 '13 at 19:12

answered Jan 04 '13 at 19:07

Sushanth --

55,259
9
66
105

3

Not necessarily since fading out will affect the layout `display:none`.. Animating the opacity only affects the visibility. – wirey00 Jan 04 '13 at 19:13

fade out element

2 Answers2