Div Won't Fade Out/fade In

I am trying to get a div to fade out and in on button click. It works on jfiddle but for some reason it is not working on my asp.net page: $('#btn').click(function(e){ $('#

Solution 1:

If you put your jQuery code inside the head section and try to manipulate the DOM elements it won't work as at that time your HTML document isn't loaded yet. So you have two ways to resolve this issue.

First : Use $(document).ready() function and put your code inside it. So whenever your document is ready, $(document).ready() event will be fired.

$(document).ready(function () {
    $('#btn').click(function (e) {
        $('#fancy').fadeOut('slow', function () {
            $('#fancy').fadeIn('slow');
        });
    });
});     

Second : Put your jQuery code at bottom of your page.

Solution 2:

Can you share the page you have this implemented on? Hard to know what's going wrong without seeing the failing code. My first guess would be that jQuery isn't running on your page.

In the meantime, you could try throwing a log inside of your click function to see if that's firing.

$('#btn').click(function(e){    
    console.log('Click fired');
    $('#fancy').fadeOut('slow', function(){
       $('#fancy').fadeIn('slow');
    });
});

Solution 3:

Looks like you may have not done the binding: try this code

$(function(){
  $('#btn').click(function(e){    
    console.log('Click fired');
    $('#fancy').fadeOut('slow', function(){
       $('#fancy').fadeIn('slow');
    });
});
}