点击事件麻烦

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