0

目前，我网站上的动画看起来有点紧张。理想情况下，我希望页面加载，等待几秒钟，然后顺利锚定到#howgreen然后打开手风琴。

在此网页 ( URL ) 中，它锚定到#howgreen下面的 jQuery 并#howgreen在 URL 中查找，如果存在，它会打开/触发/单击它以打开手风琴 ( #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');
        }
    });
});
4

3 回答 3

1

您可以侦听页面加载事件，然后像这样将单击触发器包装在 setTimeout 中

/* Anchor Open Accordions */   
$(function() {
    $(window).load(function() {
        setTimeout(function() { 
            if ( document.location.href.indexOf('#howgreen') > -1 ) {
                $('#howgreen').trigger('click');
            }
        }, 2000);
    });
});
于 2013-09-12T15:17:07.800 回答
0

我想到了两种方法，我认为您应该将两者结合使用。所以我会为你指明方向:)

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

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

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

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

现在将延迟 1 秒。

但是，我认为您应该使用更好的方法并等到您的资产被加载，然后运行您的 JS：

window.onload = function(){..}

祝你好运 ：）

于 2013-09-12T15:19:10.557 回答
0

在崩溃的开始和结束时有一个跳跃，这是由元素本身的填充同时出现和消失引起的。

解决方案是创建 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;
}
于 2013-09-12T15:21:55.207 回答