特效3texiao01.html

游鹄君2025年8月24日小于 1 分钟
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>特效</title>
  <script type="text/javascript" src='jquery-1.8.3.min.js'></script>
  <script type="text/javascript" src='jquery-color.js'></script>
  <style type="text/css"> 
    
    #dvs{
    width:300px;
    height:300px;
    border:solid 2px blue;
    background:orange;
    position:absolute;
  }
 
  </style>
</head>
<body>
  <button>显示</button>
  <button>隐藏</button>
  <button>渐隐</button>
  <button>渐显</button>
  <button>向下显示</button>
  <button>向上隐藏</button>
  <button>动画效果</button>
  <button>延时</button>
  <button>停止</button>
  <div id='dvs'></div>
</body>
  <script type="text/javascript">
    //隐藏
    $('button').eq(1).click(function(){
     //alert(1234);
     //$('#dvs').hide();
     //缩放渐变隐藏
     $('#dvs').hide(3000);
    })
 
    //显示
    $('button').eq(0).click(function(){
     //alert(1234);
     //$('#dvs').show();
     //缩进渐变显示
     $('#dvs').show(2000);
    })
 
    //渐隐
    $('button').eq(2).click(function(){
     
     //$('#dvs').fadeOut('fast');
     
     $('#dvs').fadeOut(3000);
    })
 
    //渐现
    $('button').eq(3).click(function(){
 
     //$('#dvs').fadeIn('slow');
     
     $('#dvs').fadeIn(3000);
    })
 
    //向下显示
    $('button').eq(4).click(function(){
     
     //$('#dvs').slideDown('fast');
     $('#dvs').slideDown(5000);    
    })
 
    //向上隐藏
    $('button').eq(5).click(function(){
 
     //$('#dvs').slideUp('slow');
     $('#dvs').slideUp(5000);  
    })
 
    //动画效果
    $('button').eq(6).click(function(){     
     $('#dvs').animate({
       left:'600px',
       top:'100px',
       borderRadius:'50%',
       backgroundColor:'blue'
     },5000);  
    })
 
    //延时
    $('button').eq(7).click(function(){
     $('#dvs').slideUp(2000).delay(1000).fadeIn(1000);
    })
 
    //停止
    $('button').eq(8).click(function(){
     $('#dvs').stop();
    })
  </script>
</html>