Question

我试图延迟div中文本的交换。它应该像文本的滑块/旋转木马一样操作。

我必须让代码错误，因为最终的文本替换永远不会发生。

另外，我如何动画引入替换文本（例如，窗帘）？

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

        <script type="text/javascript">
$(document).ready(function() {

    $("#showDiv").click(function() {
        $('#theDiv').show(1000, function() {
            setTimeout(function() {
                $('#theDiv').html('Here is some replacement text', function() {
                    setTimeout(function() {
                        $('#theDiv').html('More replacement text goes here');
                    }, 2500);
                });
            }, 2500);
        });
    }); //click function ends

}); //END $(document).ready()

        </script>
    </head>
<body>

    Below me is a DIV called "theDiv".<br><br>
    <div id="theDiv" style="background-color:yellow;display:none;width:30%;margin:0 auto;">
        This text is inside the Div called "theDiv".
    </div><br>
    <br>
    <input type="button" id="showDiv" value="Show DIV">



</body>
</html>

Answer 1

.html()只接受字符串或函数作为参数not both。试试这个：

 $("#showDiv").click(function () {
     $('#theDiv').show(1000, function () {
         setTimeout(function () {
             $('#theDiv').html(function () {
                 setTimeout(function () {
                     $('#theDiv').html('Here is some replacement text');
                 }, 0);
                 setTimeout(function () {
                     $('#theDiv').html('More replacement text goes here');
                 }, 2500);
             });
         }, 2500);
     });
 }); //click function ends

<强> jsFiddle example

Answer 2

试试这个：

function explode(){
  alert("Boom!");
}
setTimeout(explode, 2000);

Answer 3

您也可以使用jQuery's delay() method代替setTimeout()。它会为您提供更易读的代码。以下是文档中的示例：

$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );

唯一的限制（我知道）是它没有给你一种清除超时的方法。如果你需要这样做，那么你最好坚持使用setTimeout强加给你的所有嵌套回调。

Answer 4

这就是我解决问题的方法鼠标移出后几秒钟菜单关闭（如果悬停没有触发），

self

使用setTimeout来延迟jQuery操作的时间

4 个答案: