如何在父動畫開始時觸發jquery子函數

Question

我正在編寫一個按鈕，該按鈕具有一個每次點擊容器時都會上下翻轉的CSS箭頭。

它看起來很好，但我不知道如何在slideToggle被點擊後立即觸發toggleClass函數。

箭頭看起來有點滯後，因爲它會等待幾分之一秒直到slideToggle動畫結束。

是否有可能在動畫開始而不是結束時觸發toggleClass？

$("#content_link").click(function(){ 
    $("#content").slideToggle("fast",function(){ 

    $("div#arrow_container").toggleClass('arrow_down');   
    $("div#arrow_container").toggleClass('arrow_up'); 
    }); 

}); 

Answer 1

不知道這是你問什麼，但肯定的slideToggle()函數之前調用它，而不是它的回調函數內

$("#content_link").click(function(){ 
    $("div#arrow_container").toggleClass('arrow_down') 
          .toggleClass('arrow_up'); 
    $("#content").slideToggle("fast"); 

}); 

Answer 2

你可以設置一個開始回調，以及：

$("header#tag_cat1 div#cat1_content_link").click(function(){ 
    $("#tag_cat1_content").slideToggle({ 
    duration: "fast", 
    complete: function(){ 
     $("section.category header > div#cat1_content_link > div").toggleClass('gt_arrow_down_5px'); 
     $("section.category header > div#cat1_content_link > div").toggleClass('bt_arrow_up_5px'); 
    }, 
    start: function() {...} 
    }); 

}); 

看看第二種形式的.slideToggle()

Answer 3

從呼叫刪除代碼背部和的slideToggle函數調用後添加像這樣

$("#content_link").click(function(){ 
    $("#content").slideToggle("fast"); 
    $("div#arrow_container").toggleClass('arrow_down');   
    $("div#arrow_container").toggleClass('arrow_up'); 
});