jQuery的使用--效果

最新推荐文章于 2021-09-08 17:33:26 发布

数字改变世界

最新推荐文章于 2021-09-08 17:33:26 发布

阅读量254

点赞数

分类专栏： JavaScript JavaScript 文章标签： jQuery的使用动画效果

JavaScript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

JavaScript

5 篇文章 1 订阅

订阅专栏

1.隐藏显示效果

隐藏/显示：

<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
  $("p").hide();
  });
  $("#show").click(function(){
  $("p").show();
  });
});
</script></head>
<body><p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body></html>

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法

$(document).ready(function(){
  $("button").click(function(){
  $("p").toggle();
  });
});

2.淡入淡出的效果

fadeIn()淡入、fadout()淡出、fadeToggle()切换

<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
  });
});
</script>
</head>
<body>
<p>演示带有不同参数的 fadeToggle() 方法。</p>
<button>点击这里，使三个矩形淡入淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
</body>
</body>
</html>

3.收缩效果

slideDown():展开 slideUp():收起 slideToggle():展开或者收起

<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>jQuery是一个很好用的框架</p>
<p>多多使用这个框架</p>
</div>
<p class="flip">请点击这里</p>
</body>
</html>

4.动画效果

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

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

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

比如：

<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    });
  });
});
</script> 
</head> 
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。
如需对位置进行操作，记得首先把元素的 
CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;
height:100px;width:100px;
position:absolute;">
</div>
</body>
</html>

5.停止动画

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，
即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false

6. Chaining多个效果可以叠加

比如：$("#pannel").css("color","red").slideUp(2000).slideDown(2000);

数字改变世界

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的使用--效果

1.隐藏显示效果隐藏/显示：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;script src="jquery/jquery.js"&gt;&lt;/script&gt;&lt;script type="text/javascript"&gt;$(document).ready(function(){ $(
复制链接

扫一扫