（二）jQuery效果

来源：互联网发布：网络电视怎么用遥控器编辑：程序博客网时间：2024/05/18 03:16

（二）jQuery效果

淡入淡出效果：

fadeIn() 淡入

fadeOut() 淡出

fadeToggle() 把淡入的淡出，淡出的淡入

$(document).ready(function(){  $("button").click(function(){//点击按钮后    $("#div1").fadeIn();       //淡入    $("#div2").fadeIn("slow"); //slow的淡入    $("#div3").fadeIn(3000);  });});

fadeTo() 把颜色变淡为原来的多少

$(document).ready(function(){  $("button").click(function(){    $("#div1").fadeTo("slow",0);    //消失了    $("#div2").fadeTo("slow",0.4);    $("#div3").fadeTo("slow",1);    //不变  });});

滑动效果：

slideDown()

slideUp()

slideToggle()

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="js/jquery-3.2.1.js"></script><script> $(document).ready(function(){  $("#btn").click(function(){    $("#slide").slideToggle("slow");  });});</script> <!-- padding:5px;//从上到下填充5px--><style type="text/css"> #btn,#slide{padding:5px;text-align:center;background-color:#fff000;border:solid 1px #000000;}#slide{padding:50px;display:none;}</style></head><body><div id="btn">显示或隐藏面板。</div><div id="slide">show!</div></body></html>

动画效果：
jQueryanimate() 方法用于创建自定义动画。

$(selector).animate({params},speed,callback);

params 参数定义形成动画的 CSS 属性。

speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

callback 参数是动画完成后所执行的函数名称。

1.生成动画的过程中可同时使用多个属性;

2.也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle";

3.jQuery 提供针对动画的队列功能。这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的" 内部"队列。然后逐一运行这些 animate 调用。

默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="js/jquery-3.2.1.js"></script><script> $(document).ready(function(){  $("button").click(function(){   //执行一个动画效果，下面注释掉这段为把div右移动和把高宽改变    /*$("div").animate({      left:'250px',      opacity:'0.5',//不透明性      //height:'150px',      //height:'+=150px',//高度增加150px      height:'toggle',//高度隐藏或者显示      width:'150px'    }); */   var div=$("div");    div.animate({height:'300px',opacity:'0.4'},2000);    div.animate({width:'300px',opacity:'0.8'},"slow");    div.animate({height:'100px',opacity:'0.4'},"slow");    div.animate({width:'100px',opacity:'0.8'},"slow",function(){    alert('动画完成了！');    });   });});</script> </head><body><button>开始动画</button><div style="background:#98bf21;height:100px;width:100px;position:absolute;" ></div></body></html>

停止动画stop()：

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="js/jquery-3.2.1.js"></script><script> $(document).ready(function(){  $("#static").click(function(){    $("#move").slideToggle(2000);  });  $("#stop").click(function(){    $("#move").stop();  });});</script><style type="text/css"> #static,#move{padding:5px;text-align:center;background-color:#fff000;border:solid 1px #000000;}#move{padding:50px;display:none;/* 不显示 */}</style></head><body><button id="stop">停止滑动</button><div id="static">点我向下滑动面板</div><div id="move">Hello world!</div></body></html>

注意回调函数的使用：

一般使用回调函数的时候，是先完成效果，然后在执行回调函数

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="js/jquery-3.2.1.js"></script><script>$(document).ready(function(){  $("button").click(function(){    $("p").hide("slow",function(){      alert("段落现在被隐藏了");    });  });});</script></head><body><button>隐藏</button><p>点击“隐藏”按钮我就会消失</p></body></html>

jQuery方法链接：允许我们在相同的元素上运行多条 jQuery命令，一条接着另一条；

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="js/jquery-3.2.1.js"></script><script>$(document).ready(function()  {  $("button").click(function(){    $("#p1").css("color","red").slideUp(2000).slideDown(2000);  });});</script></head><body><p id="p1">一段被操纵的文字</p><button>点我</button></body></html>

阅读全文

0 0