2

这是代码：

<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

4

4 回答 4

2

第一个问题：您将点击绑定到错误的元素；第二：看起来你应该在使用时设置明确的时间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);
});

小提琴

更新：时间问题是 jQuery 限制：

只有队列中的后续事件被延迟；例如，这不会延迟不使用效果队列的 .show() 或 .hide() 的无参数形式。

（来自delay 文档）

于 2013-07-16T10:02:52.293 回答
0

这是工作示例：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();
    });
});
于 2013-07-16T10:00:37.557 回答
0 
$('#successDiv').on('click', function () {

应该

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

和

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

应该

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

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

于 2013-07-16T09:58:22.613 回答
0

如果你删除delay(4000).toggle();它的最后一部分。http://jsfiddle.net/582Z3/

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

你想耽搁什么？

顺便说一句，还将点击事件中的 id 更改为$('#showSuccess').

于 2013-07-16T10:02:11.240 回答