用switch语句没有显示??那里面错了?

来源:3-1 jQuery中淡出动画fadeOut

云彩无色3804005

2016-12-14 13:01

<!DOCTYPE html>

<html>


<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <style>

        p{

            color:red;

        }

    </style>

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head>


<body>

    <h2>fadeOut</h2>

    <p>测试文字淡入效果</p>

    <p>慕课网,专注分享</p>

    淡出的隐藏效果:

    <select id="animation">

        <option value="1">fadeOut( )</option>

        <option value="2">fadeOut( "slow" )</option>

        <option value="3">fadeOut( 3000 )</option>

        <option value="4">fadeOut( 1000, complete )</option>

        <option value="5">fadeOut( 1000, "linear" )</option>

        <option value="6">fadeOut( options )</option>

    </select>

    

    </br></br>

    

    <input id="btnFadeOut" type="button" value="点击淡出隐藏" />

    <input id="btnshow" type="button" value="显示" />

    

    <script type="text/javascript">

    //【显示】按钮

    $("#btnShow").click(function() {

        $("p").show();

    });


    //【隐藏】按钮

    $("#btnFadeOut").click(function() {

        var v = $("#animation").val();

       switch(v){

case 1:$("p").faseOut();break;

case 2:$("p").faseOut('slow');break;

case 3:$("p").faseOut(3000);break;

case 4:$("p").faseOut(2000,function(){

alert("隐藏完毕!")});break;

case 5:$("p").faseOut(1000,linear);break;

default:$("p").faseOut({duration:1000});

}

    });

    </script>

</body>


</html>


写回答 关注

3回答

  • 吴彦祖的帅气
    2016-12-23 17:14:45
    已采纳

    //错误点:

    //1.淡出为fadeOut,不是faseOut;

    //2.btnShow跟你前面的id名字大小写不一样。

    <!DOCTYPE html>

    <html>


    <head>

        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

        <title></title>

        <style>

            p{

                color:red;

            }

        </style>

        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

    </head>


    <body>

        <h2>fadeOut</h2>

        <p>测试文字淡入效果</p>

        <p>慕课网,专注分享</p>

        淡出的隐藏效果:

        <select id="animation">

            <option value="1">fadeOut( )</option>

            <option value="2">fadeOut( "slow" )</option>

            <option value="3">fadeOut( 3000 )</option>

            <option value="4">fadeOut( 1000, complete )</option>

            <option value="5">fadeOut( 1000, "linear" )</option>

            <option value="6">fadeOut( options )</option>

        </select>

        

        </br></br>

        

        <input id="btnFadeOut" type="button" value="点击淡出隐藏" />

        <input id="btnshow" type="button" value="显示" />

        

        <script type="text/javascript">

        //【显示】按钮

        $("#btnshow").click(function() {

            $("p").show();

        });


        //【隐藏】按钮

        $("#btnFadeOut").click(function() {

            var v = $("#animation").val()

           switch(v){

    case 1:$("p").fadeOut();break;

    case 2:$("p").fadeOut('slow');break;

    case 3:$("p").fadeOut(3000);break;

    case 4:$("p").fadeOut(2000,function(){

    alert("隐藏完毕!")});break;

    case 5:$("p").fadeOut(1000,linear);break;

    default:$("p").fadeOut({duration:1000});

    }

        });

        </script>

    </body>


    </html>


    云彩无色38...

    非常感谢!

    2016-12-26 09:29:19

    共 1 条回复 >

  • qq_迸发激情_0
    2017-12-14 18:19:22

    楼上说的有理,case后应该是字符串'1'等等,还有linear应该加引号才能执行!

  • b谁都勇敢
    2016-12-14 13:32:37

    switch在判断时,使用的是全等,也就是说只有在数值和数据类型都相同的情况下,才可以执行,你上边的value值的类型为字符串类型,但是你在switch中的条件的数据类型为number类型,二者值不一致,所以无法执行下述操作

    b谁都勇敢 回复云彩无色38...

    case "1":;case "2",你将case后边的值该成字符串格式

    2016-12-19 12:59:23

    共 2 条回复 >

jQuery基础(四)—动画篇

jQuery基础教程动画篇,讲解jQuery基础开启动画修炼

85058 学习 · 262 问题

查看课程

相似问题