Reputation: 6304
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
Reputation: 92983
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
Reputation: 28106
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
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