點擊事件麻煩

Question

我有這個滑塊的事情與CSS和jquery很好，有一個問題：當我點擊第一個標籤的事情，它播放我的動畫（見下文），但我怎麼讓它反轉，當我點擊標籤又是什麼？我不想對我的代碼做大的修改，所以請儘量保持我的代碼類似，只需添加我需要的代碼即可。

這是我的javascript：

$(".guitar").click(function(){ 
$(".guitar_content").css({display: "block"}).animate({width: "500px"},1000); 
$(".guitar_text").delay(1200).animate({opacity: "1"},600); 

它只是改變顯示DIV和寬度擴大到像滑動。然後文本就在後面消失。

Answer 1

你想要$.toggle()功能。

$(".guitar").toggle(
    function(){ 
     $(".guitar_content").css({display: "block"}).animate({width: 500},1000); 
     $(".guitar_text").delay(1200).animate({opacity: 1},600); 
    }, 
    function(){ 
     // Reset previous values. 
     $(".guitar_content").css({display: "inline"}).animate({width: 0},1000); 
     $(".guitar_text").delay(1200).animate({opacity: 0},600); 
    } 
);