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) 
     }); 
    }); 
});