jquery - 点击事件问题

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