HTML之jQuery自学笔记（四）

最新推荐文章于 2022-01-02 18:08:54 发布

小源丶同学

最新推荐文章于 2022-01-02 18:08:54 发布

阅读量160

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/qq_38611556/article/details/79575682

版权

前端开发专栏收录该内容

15 篇文章 0 订阅

订阅专栏

jQuery 动画

jQuery-animate（）方法

jQuery animate（）方法用于创建自定义动画

语法：

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

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

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

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

实例：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
</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>

注意：生成动画的过程中，可以同时使用多个属性，而不仅仅是一个属性。

使用相对值：

也可以定义相对值，该值相对于元素的当前值。

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

使用预定义的值：

还可以把属性的动画值设置为show，hide或toggle，来实现隐藏和显示

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      height:'toggle'
    });
  });
});
</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>

使用队列功能：

默认地，jQuery提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个animate（）调用，jQuery会创建包含这些方法调用的”内部“队列。然后逐一运行这些调用。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
  });
});
</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>

stop（）停止动画

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法：

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

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

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

$(selector.stop(stopAll,goToEnd);

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

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

因此，默认地，stop（）会清楚在被选元素上制定的当前动画。

实例：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>

<body>
 
<button id="stop">停止滑动</button>
<div id="flip">点击这里，向下滑动面板</div>
<div id="panel">Hello world!</div>

</body>
</html>

jQuery-Chaining

jQuery方法链接

链接技术允许我们在相同的元素上运行多条jQuery命令，一条接着一条，这样的话，浏览器就不必多次查找相同的元素。

例：

$(selector).css("color","red").slideUp(2000).slideDown(2000);

class为p1的元素首先会变红色，然后向上滑动，然后向下滑动。

小源丶同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML之jQuery自学笔记（四）

jQuery 动画jQuery-animate（）方法jQuery animate（）方法用于创建自定义动画语法：$(selector).animate({params},speed,callback)必须的params参数定义形成动画的CSS属性。可选的speed参数规定效果的时长。他可以取："slow"、"fast"或毫秒。可选的callback参数是动画完成后所执行的函数名称。实例：&lt;...
复制链接

扫一扫

专栏目录