CODEWITHSUNDEEP
jqueryjquery-animate
DevKev
DevKev

Reputation: 6314

How to make jQuery animation smoother

Currently, the animation on my website looks a bit jittery. Ideally, I would like the page to load, wait a few seconds, then smoothly anchor to #howgreen and then open the accordion.

In this webpage (URL), it anchors to #howgreen and the jQuery below looks for #howgreen in the URL and if it exists it opens/triggers/clicks it to open the accordion (#howgreen-text). How can I delay the animation or make the animation on my website work more smoothly?

$("#howgreen").click(function () {
    $(this)
        .parent()
        .children('#howgreen-text')
        .animate({
            height: 'toggle'
        }, 'slow', function () {
            if ($(this).parent().children('#howgreen-text').css('display') == 'block') {
                $(this)
                    .parent()
                    .children('#howgreen')
                    .addClass("work-main-bar-active");
            } else {
                $(this)
                    .parent()
                    .children('#howgreen')
                    .removeClass("work-main-bar-active");
            }
        });
});
/* Anchor Open Accordions */
$(document).ready(function () {
    $(function () {
        if (document.location.href.indexOf('#howgreen') > -1) {
            $('#howgreen')
                .trigger('click');
        }
    });
});

Upvotes: 0

Views: 1777

Answers (3)

Blazemonger
Blazemonger

Reputation: 92993

There's a jump at the start and end of the collapse that's caused by the padding on the element itself appearing and disappearing all at once.

The solution is to create a child element of the div and add the padding to it.

Currently, you have:

.happening-main-text {
    /* other styles */
    padding: 30px 0px 0px 30px;

You should wrap ALL the children of .happening-main-text in another <div>...</div> and move the above style to it:

.happening-main-text > div {
    padding: 30px 0px 0px 30px;
}

Upvotes: 0

Jamie Hutber
Jamie Hutber

Reputation: 28126

Two ways come to my head, and I think you should use a combination of the two. So I'll point you in the direction :)

First off you have the jQuery function .delay() and this will do as the name suggests, it will delay animations . So this will only apply to this part of your code

 $(this).parent().children('#howgreen-text').animate({
    height: 'toggle'
 }

So you could easily do this:

$(this).parent().children('#howgreen-text').delay(1000).animate({
    height: 'toggle'
}

Which will now delay for 1 second.

However I think you should use a better approch and wait until your assests are loaded and then run your JS with:

window.onload = function(){..}

Good luck :)

Upvotes: 0

bbone
bbone

Reputation: 626

You could listen for the page load event and then wrap the click trigger in a setTimeout like so

/* Anchor Open Accordions */   
$(function() {
    $(window).load(function() {
        setTimeout(function() { 
            if ( document.location.href.indexOf('#howgreen') > -1 ) {
                $('#howgreen').trigger('click');
            }
        }, 2000);
    });
});

Upvotes: 1

Related Questions