Question

以下是代码：

<html>
    <head>
        <script src="http://code.jquery.com/jquery.min.js"></script>
        <script>
            function showSuccess() {
                $('#successDiv > p').empty().append("Saving the Device Whitelist was a success.<br />Server Resonse: Sucess");
                $('#successDiv').toggle().delay(4000).toggle();
            }

            $(function () {
                $('#successDiv').on('click', function () {
                    showSuccess();
                })
            });
        </script>
    </head>
    <body>
        <div id="successDiv" style="display:none">
            <p>Hello</p>
        </div>

        <input type="button" id="showSuccess" value="Show Success" />
    </body>
</html>

出于某种原因，切换不起作用......

以下是jsfiddle

Answer 1

第一个问题：你将点击绑定到错误的元素;第二：看起来你应该在使用delay时设置明确的时间：

function showSuccess() {
    $('#successDiv > p').empty().append("Saving the Device Whitelist was a success.<br />Server Resonse: Sucess");
    $('#successDiv').toggle(100).delay(4000).toggle(100);
}

$(function () {
    $('#showSuccess').on('click', showSuccess);
});

Fiddle

Upd：时间问题是jQuery限制：

仅延迟队列中的后续事件;例如，这将不延迟.show（）或.hide（）的无参数形式使用效果队列。

（来自delay documentation）

Answer 2

$('#successDiv').on('click', function () {

应该是

 $('#showSuccess').on('click', function () {

和

 $('#successDiv').toggle().delay(4000).toggle();

应该是

 $('#successDiv').show(0).delay(4000).hide(0);

这里是小提琴http://jsfiddle.net/L35rW/

Answer 3

以下是工作示例：http://jsfiddle.net/js3E6/1/

$(function () {
    $('#showSuccess').on('click', function () {

        $('#successDiv > p').html("Saving the Device Whitelist was a success.<br />Server Resonse: Sucess");
        $('#successDiv').slideDown().delay(4000).slideUp();
    });
});

Answer 4

如果删除最后一部分delay(4000).toggle();，它就可以了。 http://jsfiddle.net/582Z3/

$('#successDiv').toggle();

你有什么延迟？

顺便说一下，也可以将点击事件中的ID更改为$('#showSuccess')。

JQuery简单切换不起作用

4 个答案: