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

点击事件麻烦

1 个答案: