Question

目前，动画on my website看起来有些紧张。理想情况下，我希望页面加载，等待几秒钟，然后平稳地锚定到#howgreen，然后打开手风琴。

在此网页（URL）中，它锚定到#howgreen，下面的jQuery在网址中查找#howgreen，如果存在，则打开/触发/点击它以打开手风琴（#howgreen-text）。如何延迟动画或使我网站上的动画更顺畅地工作？

$("#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');
        }
    });
});

Answer 1

您可以侦听页面加载事件，然后将click触发器包装在setTimeout中，如此

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

Answer 2

我想到了两种方式，我认为你应该结合使用这两种方式。所以我会指出你的方向：）

首先你有jQuery函数.delay()，这将顾名思义，它会延迟动画。所以这只适用于你的代码的这部分

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

所以你可以轻松地做到这一点：

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

现在将延迟1秒。

但是我认为你应该使用更好的approch并等到你的assests被加载然后运行你的JS：

window.onload = function(){..}

祝你好运：）

Answer 3

在崩溃的开始和结束处有一个跳跃，这是由于元素本身的填充一下子出现和消失所致。

解决方案是创建div的子元素并向其添加填充。

目前，您有：

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

你应该将.happening-main-text的所有孩子都包裹在另一个<div>...</div>中并将上述风格移到它上面：

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

如何使jQuery动画更流畅

3 个答案: