0

現在、私のウェブサイトのアニメーションは少しぎくしゃくしています。理想的には、ページが読み込まれ、数秒待ってから、スムーズ#howgreenにアコーディオンに固定して開きます。

この Web ページ ( URL ) では、アンカーされ#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');
        }
    });
});
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

2 つの方法が頭に浮かびますが、2 つを組み合わせて使用​​する必要があると思います。だから私はあなたを方向に向けます:)

最初に 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 に答える