CODEWITHSUNDEEP
jquerycss
Nouman Niazi
Nouman Niazi

Reputation: 371

Using animate causes some elements to act weird and messing up the logic

$("#about").click(function (e) {
    e.preventDefault();
    $('nav').animate({
        'left': '-10.5em'
    }, 200, 'easeInOutQuad');
    $('#underwater').css('background', 'rgb(16, 66, 89)');
    if ($('#underwater').css('opacity') == 1) {
        $("#waves_1").data('dir', true).css('backgroundPosition', '0px 0px');
        $("#waves_2").data('dir', false).css('backgroundPosition', '0px 0px');
        $("#underwater").css('height', win.height()).animate({
            'height': 0 + 20
        }, 300, 'easeInOutQuad')
        $("#waves_1, #waves_2").stop().animate({
            'bottom': 0
        }, 300, 'easeInOutQuad');
        $("#underwater").animate({
            'opacity': 0
        }, 100, 'easeInOutQuad');
        setTimeout(function () {
            $(".pg-content").hide();
        }, 1000);
        tide(); //  get the waves moving
        tide2();
        setTimeout(function () {
            q_about();
        }, 1000);
    } else {
        $("#waves_1, #waves_2").stop().animate({
            'bottom': win.height()
        }, 3000, 'easeInOutQuad');
        $("#underwater").css('height', 0).css('opacity', 1).show().animate({
            'height': win.height() + 20
        }, 3000, 'easeInOutQuad')
        $("#q_about").show();
        setTimeout(function () {
            nav_out();
        }, 3100);
    }
});

.pg-content is under #underwater

Functions that are being called within the #about click

function q_about() {
    $("#waves_1, #waves_2").stop().animate({
        'bottom': win.height()
    }, 750, 'easeInOutQuad');
    $("#underwater").css('height', 0).css('opacity', 1).show().animate({
        'height': win.height() + 20
    }, 750, 'easeInOutQuad');
    $("#q_about").show();
    $('nav').animate({
        'left': '-4.5em'
    }, 2000, 'easeInOutQuad');
};

If you noticed above, the nav is being sent on the extreme left to hide from the view area and once the animation ends, the nav becomes normal to left : -4.5em

function nav_out() {
    $('nav').animate({
        'left': '-4.5em'
    }, 200, 'easeInOutQuad');
}

So the main issue is with the div id #underwater and here is the css of it

#underwater {
    display: none;
    opacity: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0;
    width: 100%;
    background: rgb(22, 57, 85) url("imgs/noise.png") top center no-repeat;
    z-index: 1500;
    overflow: auto!important;
}

Upon click

element.style {
    width: 594px;
    height: 750px;
    opacity: 1;
    display: block;
    overflow: hidden;
    background: rgb(16, 66, 89);
}

HTML for the water waves

#waves_1 and #waves_2 has absolute positioning

<div id="waves">
    <div id="waves_1" style="bottom: 0px;"></div>
    <div id="waves_2" style="bottom: 0px;"></div>
</div>

Purpose of all this is that I'm using it on a one page website and I show content that is being hidden under the id #underwater but when you click for instance the menu buttons, I have a couple of them with the same work-around. Often I see the #waves_1 and #waves_2 moving faster than the #underwater.

From my logic, #waves_1 and #waves_2 should move up accurately along with the #underwater since the #underwater is below #waves_1 and #waves_2 and the function creates an animation where the water grows height and becomes the screen size height pushing up the #waves_1 and #waves_2.

I explained the scenario, any improvement is welcome along side if someone can fix the issue.

I can't do the JSfiddle version as of now since I believe the defect is in the code logic which I have above but if needed, I will create a JSfiddle

Reference Image

problem

Upvotes: 0

Views: 83

Answers (1)

Ross Brasseaux
Ross Brasseaux

Reputation: 4150

function q_about() {
    $("#waves_1, #waves_2").stop().animate({ // <--- these are being called at same time.
        'bottom': win.height()
    }, 750, 'easeInOutQuad');
    $("#underwater").css('height', 0).css('opacity', 1).show().animate({ // <--- these are being called at same time.
        'height': win.height() + 20
    }, 750, 'easeInOutQuad');
    $("#q_about").show(); // <--- these are being called at same time.
    $('nav').animate({ // <--- these are being called at same time.
        'left': '-4.5em'
    }, 2000, 'easeInOutQuad');
};

You need to look into using promises or callback functions. With jQuery's animate, it is pretty easy. If you want these animations to run one after the other, do this:

function q_about() {
        $("#waves_1, #waves_2").stop().animate({ // <-- this runs right away
            'bottom': win.height()
        }, 750, 'easeInOutQuad', function () {
            $("#underwater").css('height', 0).css('opacity', 1).show().animate({ // <-- this runs .75 seconds after start
                'height': win.height() + 20
            }, 750, 'easeInOutQuad', function () {
                $("#q_about").show({ // <-- this runs 1.5 seconds after start
                    'complete': function () {
                        $('nav').animate({ // <-- this runs 1.9 seconds after start (400 is default duration for `.show()`)
                            'left': '-4.5em'
                        }, 2000, 'easeInOutQuad');
                    }
                });
            });
        });
    };

Additionally, for any button that triggers animation or an ajax request of some kind, it is good practice to disable the button right away, then re-enable it once the animation and/or request is complete.

Upvotes: 1

Related Questions