javascript - Jquery隐藏/显示滚动动画

Question

当我单击任何年份列(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内容)>显示内容动画

Answer 1

您想要利用 jQuery 动画的回调功能。所以对于hide ，例如，您可以这样做:

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

这将确保动画在前一个动画完成时运行。