CODEWITHSUNDEEP
jquerycssfadeout
Kevin Lupo
Kevin Lupo

Reputation: 71

jQuery fadeout not working

Okay, so I have this code: 

$('#login').click(function() {
        $('#main').fadeOut('slow', function() {
            $(this).html($('#hidden-login-div').html()).fadeIn('fast');
        });
    });

On this page: http://ag.kirindesigns.com/search.php

I want it to fadeout the main division (with ID of "main") when you click the login button in the upper left (with ID of "login"). However, the code you see isn't doing anything.

If you click the Search button, however, the main div will fade out...using almost exactly the same code, here's the code the search button is using (which is part of an ajax call).

 $('#main').fadeOut('slow', function() {
      $(this).html(data).fadeIn('fast');
      height = $('#main').height();
      frame.height(height + 40);
      frame.width("720");
  });

I attempted to use the .slideUp() option just to see what happens. The bottom of the division flickers, like it's trying to slide up but acts like it hits a wall and just jumps and then does nothing. So I'm a tad confused on what's causing this issue and why it works perfectly fine in the ajax call but won't work on a simple .click() call.

Upvotes: 0

Views: 1253

Answers (1)

Mohsen
Mohsen

Reputation: 307

use this:

$('#login').click(function(e) {
    e.preventDefault();
    $('#main').fadeOut('slow', function() {
        $(this).html($('#hidden-login-div').html()).fadeIn('fast');
    });
});

Upvotes: 2

Related Questions