Question

我的问题是，当我点击按钮时，它会显示click动画，但是当它打开然后我点击它时它应该停留并且不要进行点击动画。这有可能吗？。

此处为JSFiddle。

Answer 1

fiddle Demo

var a_red = $(".a_demo_threee,.a_demo_threee_open"),
    content = $("#contentlogin");
content.hide(); //hides the content so its invisibil on the refresh/load of the website
a_red.click(function (e) { //opens the login
    e.stopPropagation();
    a_red.stop().animate({
        "width": "300px",
            "height": "200px",
    }, 1000);
    content.show();
    if (content.is(':visible')) {
        $(this).removeClass('a_demo_threee').addClass('a_demo_threee_open');
    }
});
$(document).click(function () {
    a_red.stop().animate({
        "width": "42px",
            "height": "39px",
    }, 1000);
    content.hide();
    a_red.removeClass('a_demo_threee_open').addClass('a_demo_threee');
});

<小时/> 当标识为a_demo_threee_open的元素可见时，将类更改为contentlogin，并在隐藏时切换回a_demo_threee。

Answer 2

点击

向$（“。a_demo_threee”）添加“打开”课程

$(".a_demo_threee").click(function (e) { //opens the login
    e.stopPropagation();
    $(".a_demo_threee").stop().animate({

        "width": "300px",
        "height": "200px",
    }, 1000);

    $(this).addClass('open'); // <---- This is what I am adding

    $("#contentlogin").show();     
});

然后把这个CSS：

.a_demo_threee.open {
     top: 0;
    box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px darkred, 0px 10px 5px #999;
}

点击文件后，删除课程'打开'

$(document).click(function () {
   $(".a_demo_threee").removeClass('open').stop().animate({
        "width": "42px",
        "height": "39px",
   }, 1000);

   $("#contentlogin").hide();
});

JSFiddle - http://jsfiddle.net/6tZ4g/1/

Jquery / CSS在Jquery动画后禁用按钮单击动画

2 个答案: