2

年列 (2012、2011、2010 など) をクリックすると、各年の内容が表示され、他の年は非表示になります。

問題は、クリックすると (たとえば 2011 年の列)、アニメーションがすべての効果を同時に実行してユーザーを混乱させることです。アニメーションの手順でそれを行う必要があると思いますが、 jquery ソリューション。

これは私のコードです：

/* Scroll Function */
function scrollto(position){
    $('html, body').stop().animate({
        scrollLeft: position
    }, 1000);
}

/* Calendar Scroll */
$(".sub_section_title").click( function(e) {
    e.preventDefault();
    $(".contenido_calendario").hide();
    $(this).next(".contenido_calendario").toggle('slow');
    scrollto($(this).offset().left - 352)
});

.queue() を使用して効果を修正しようとしましたが、機能しません。コードが適切に記述されているかどうかもわかりません。

$(".sub_section_title").click( function(e) {
    e.preventDefault();
    $(".contenido_calendario").hide();
    $(".contenido_calendario").queue(function() {
        scrollto($(this).offset().left - 352);
        $(this).dequeue();
    });
    $(".contenido_calendario").queue(function() {
        $(this).next(".contenido_calendario").toggle('slow')
    $(this).dequeue();
    });
});

アニメーションは次のようになります: 2011 をクリック > 2011 列を左にスクロール (2012 コンテンツを非表示) > コンテンツのアニメーションを表示

4

1 に答える 1

2

jQueryアニメーションのコールバック機能を利用したいと考えています。たとえば、非表示の場合、次のように実行できます。

var outerContainer = $(this);
$(".contenido_calendario").hide(500, function() {
    outerContainer.next(".contenido_calendario").toggle('slow', function() {
        scrollto(outerContainer.offset().left - 352);
    });
});

これにより、前のアニメーションが終了したときにアニメーションが確実に実行されます。

于 2012-10-18T13:47:38.057 に答える