CODEWITHSUNDEEP
jqueryfadeinfadeoutaddclassremoveclass
Jacob Buller
Jacob Buller

Reputation: 137

FadeIn/FadeOut an addClass/removeClass JQuery

I am using the below JQuery code to add and remove a class that has a display:none property and add a class that has a display:block to three different divs positioned relatively. Basically I have a side navigation that has three links that, when clicked, I want to displays different divs on the page, one fading out and then the other fading in.

            $(document).ready(function() {
        $('#what-we-do, #location').hide();
        $('#who-we-are').show();    


        });

$(function() {
        $("#show-main-who").mousedown(function() {
            $('#what-we-do, #location').fadeOut('fast',function(){
            $(this).addClass('hide-info');
            $(this).removeClass('show-info');

            });
        });
        $('#show-main-who').mouseup(function() {
            $('#who-we-are').fadeIn('fast',function(){
                $(this).removeClass('hide-info');
                $(this).addClass('show-info');
        });
    });
});
$(function() {
        $("#show-main-what").mousedown(function() {
            $('#who-we-are, #location').fadeOut('fast',function() {
            $(this).addClass('hide-info');
            $(this).removeClass('show-info');


            });
        });
        $('#show-main-what').mouseup(function() {
            $('#what-we-do').fadeIn('fast',function(){
                $(this).removeClass('hide-info');
                $(this).addClass('show-info');
        });
    });
});
$(function() {
        $("#show-main-location").mousedown(function() {
            $('#what-we-do, #who-we-are').fadeOut('fast',function(){
            $(this).addClass('hide-info');
            $(this).removeClass('show-info');

            });
        });
        $('#show-main-location').mouseup(function() {
            $('#location').fadeIn('fast',function(){
                $(this).removeClass('hide-info');
                $(this).addClass('show-info');
        });
    });
});

When you see my website at http://jacobbuller.com/testsites/peacock/ and use the side navigation you can see that the div does fade out but the other div fading in shows below it for an instant, then moves into place. It makes it look choppy and unprofessional, any idea how to fix this without having to make the divs positioned absolutely?

Upvotes: 0

Views: 2461

Answers (1)

Yehuda
Yehuda

Reputation: 96

You have a period missing on the second line. Should read:-

$("#what-we-do, #location").fadeOut("slow", function() {

Upvotes: 1

Related Questions