如何使jQuery动画更平滑

目前，动画看起来有点紧张。理想情况下，我希望加载页面，等待几秒钟，然后平稳地锚定到

#howgreen

，然后打开手风琴

在这个网页（）中，它锚定到

#howgreen

，下面的jQuery在URL中查找

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

---

您可以侦听page load事件，然后将click触发器包装为setTimeout，如下所示

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

---

我想到了两种方法，我认为你应该结合使用这两种方法。因此，我将为您指明方向：）

首先，您有jQuery函数，这将按照名称所示，它将延迟动画。所以这只适用于代码的这一部分

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

所以你可以很容易地做到这一点：

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

现在将延迟1秒

但是，我认为您应该使用更好的方法，等待您的资产加载，然后使用以下工具运行JS：

window.onload = function(){..}

---

祝你好运：）

在折叠的开始和结束处有一个跳跃，这是由元素本身上的填充物同时出现和消失引起的

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

目前，您有：

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

您应该将

.main text

的所有子级包装到另一个

..

中，并将上述样式移动到其中：

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

---

我添加了文档。准备就绪，但仍然不是很顺利：准备就绪将等到

dom

准备就绪，

load

将等到所有东西都加载完毕：D sweeettttt你能把代码放到js小提琴上吗，我想测试一下，如果你需要帮助的话？