Jquery工作常用实例——回调函数的使用

当动画 100% 完成后,即调用 Callback 函数。如果我们没用callback而是直接用语句,那么有可能达不到我们想要的效果,比如我下面的一个实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#button").click(function(){
            $("p").hide("slow");
            alert("内容已经隐藏了!");
        })
    })
</script>
</head>

<body>
<p>Hello,my name is Adam Li.</p>
<input id="button" type="button" value="Click me to see what happened" />
</body>
</html>
我是想点击按纽“Click me to see what happened”之后先把p段落里的所有内容隐藏,再弹出对话框提示用户。可事实并不是这样,结果是先弹出对话框再隐藏段落里的内容,显然这不是我们要的。

再看看我重新修改后的:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#button").click(function(){
            $("p").hide("slow",function(){
                alert("内容已经隐藏了!");
            });       
        })
    })
</script>
</head>

<body>
<p>Hello,my name is Adam Li.</p>
<input id="button" type="button" value="Click me to see what happened" />
</body>
</html>
此时我点击“Click me to see what happened”时将先将内容隐藏,再弹出对话框,目的已达到,这就是使用与不使用回调函数的区别,当然,它的用途还不止于此,更多的还要我们经常使用才能知道它的更多用处,比如我们在用fadeOut()后再执行回调fadeIn(),那么将淡出再淡入,又比如我们在使用hide()后再执行回调show(),那么将先隐藏再显示等等。

 

你可能感兴趣的:(Jquery工作常用实例)