javascript - Jquery 效果 .queue()

Question

这是我正在处理的网站：http ://www.sircat.net/joomla/sircat/mies/calendari.html

当我单击任何年份列（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();
    });
});

Answer 1

只需使用回调函数：

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

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