提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)

jQuery方法 使用 图片 显示 隐藏 fadeIn
2023-06-13 09:14:53 时间

复制代码代码如下:


   <head>

   <title></title>

   <styletype="text/css">

   #img1

   {

       width:400px;height:500px;

       }

   </style>

   <scriptsrc="jquery-1.9.1.js"type="text/javascript"></script>

   <scripttype="text/javascript">

       $(function(){

           $("#Button1").bind("click",function(){

               $("img").fadeOut(2000,function(){

                   $("#Button1").val("哎，没了");     //图片的消逝

               });

           })

           $("#Button2").bind("click",function(){

               $("img").fadeIn(2000,function(){

                   $("#Button2").val("有了");     //图片的呈现

               });

           })

           $("#Button3").bind("click",function(){

               $("img").fadeTo(2000,0.3,function(){

                   alert("画动执行终了");      //图片透明度

               });

           })

           $("#Select1").bind("change",function(){//可是以change或者是click事件

               $("img").fadeTo(1000,$("#Select1option:selected").val());

           })

       })

   </script>

   </head>

   <body>

   <imgsrc="images/1.jpg"id="img1"/>

   <inputid="Button1"type="button"value="button"/>

   <inputid="Button2"type="button"value="button"/>

   <inputid="Button3"type="button"value="button"/>

   <selectid="Select1">

       <option>1</option>

       <option>0.1</option>

       <option>0.2</option>

       <option>0.3</option>

       <option>0.4</option>

       <option>0.5</option>

       <option>0.6</option>

       <option>0.7</option>

       <option>0.8</option>

       <option>0.9</option>

       <option>0</option>

   </select>

   </body>

相关文章