simple fade out image on link click

  <script>
  $("a").click(function () {
 开发者_Go百科 $("#wrapper").fadeOut("slow");
  });
  </script>


 <div id="wrapper" >
  <a href="1.html"> <img src="images/landing.png"/></a>
  </div>

I have checked the jquery documentation but it has not solved the problem, have tried to substitute different selectors

You are executing the script before the DOM is loaded. The jQuery call $("a") executes promptly before the <a> tag is defined and hence click isn't bound to anything. To fix use the ready function which executes after <a> is available.

$(document).ready(function() {
  $("a").click(function () {
    $("#wrapper").fadeOut("slow");
  });
});

JSFiddle Example - http://jsfiddle.net/Vkd8J/

You need to prevent the default event behavior.

$(document).ready(function() {
    $("a").click(function(e) {
        e.preventDefault();
        $("#wrapper").fadeOut("slow");
    });
});

See this jsFiddle Example.

Also, you must make sure the DOM is ready, by wrapping your whole code with

$(document).ready(function() { ... }

Why? Since your <script> tags are BEFORE the whole document, (which is perfectly acceptable), when your script runs, the elements you are trying to use don't yet exist (as they weren't downloaded by the browser yet). For that reason, you wait until the DOM is ready, and then execute the code.

(In combination with document.ready, mentioned by others)

You need to use e.preventDefault(); to stop the link from going to the href:

$("a").click(function(e) {
    $("#wrapper").fadeOut("slow");
    e.preventDefault();
});

http://jsfiddle.net/vAN3z/

Everything its rigth, but you're missing to wrap everything inside $(document).ready() as here:

<script>
$(document).ready(function(){
    $("a").click(function () {
        $("#wrapper").fadeOut("slow");
    });
})
</script>