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