6月7号工作（jquery停止动画、Callback 函数、Chaining在一个语句中有多个jquery有）...

最新推荐文章于 2024-09-03 17:02:58 发布

xjwolaile

最新推荐文章于 2024-09-03 17:02:58 发布

阅读量81

点赞数

分类专栏：前端技术文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/xjwolaile/article/details/84440471

版权

前端技术专栏收录该内容

188 篇文章 0 订阅

订阅专栏

今天的工作

1、stop()


<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(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>

stop()就是可以在滑动效果执行的中止滑动，但是在中止后在按下是没有用的在点击带滑动效果的div才能继续执行以为滑动效果里面的值是5000所以很慢这样可以看的到很好的效果

2、stop()带有参数


<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#start").click(function(){
    $("div").animate({left:'100px'},5000);
    $("div").animate({fontSize:'3em'},5000);
  });

  $("#stop").click(function(){
    $("div").stop();
  });

  $("#stop2").click(function(){
    $("div").stop(true);
  });

  $("#stop3").click(function(){
    $("div").stop(true,true);
  });

});
</script> 
</head>
<body>

<button id="start">开始</button>
<button id="stop">停止</button>
<button id="stop2">停止所有</button>
<button id="stop3">停止但要完成</button>
<p><b>"开始"</b> 按钮会启动动画。</p>
<p><b>"停止"</b> 按钮会停止当前活动的动画，但允许已排队的动画向前执行。</p>
<p><b>"停止所有"</b> 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。</p>
<p><b>"停止但要完成"</b> 会立即完成当前活动的动画，然后停下来。</p> 

<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

</body>
</html>

stop() 其中有个元素第一个是开始按钮点击后开始动画在下面的stop是停止这个动画效果有两个效果一个是移动div第二个是让字体变大第二个元素是停止当前动画就是在div移动的时候会停止div的移动但是没办法停止字体的变化第三个元素是全部停止就是点击后div和字体都停止第四个元素是点击后全部效果在瞬间完成没有速度的感念那么在点击完二和三后在点击一元素可以继续完成效果

3、没有 Callback 元素


<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").hide(2000);
  alert("The paragraph is now hidden");
  });
});
</script>
</head>
<body>
<button type="button">Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>

这个方法当点击完按钮后会马上出现警告框无法看见完整的动画效果所以是个不好的例子

4、有 Callback 元素


<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").hide(1000,function(){
    alert("The paragraph is now hidden");
    });
  });
});
</script>
</head>
<body>
<button type="button">Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>

在加入了Callback 元素后当还在动画过程中要是点击了警告框，警告框不会立马跳出来而是会等动画效果结束以后在跳出来这样就能很好的分清楚主次顺序而不会向上面的例子一样点击后直接跳出来妨碍动画效果

5、这一个Chaining元素的例子


<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  });
});
</script>
</head>

<body>

<p id="p1">jQuery 乐趣十足！</p>
<button>点击这里</button>

</body>
</html>

在点击了按钮后会自动完成变化颜色和div的滑动效果滑入和滑出效果那就是在一个语句里有多个jquery的写法还有种就是将滑动效果写的很好看一写

好看点的滑动效果书写格式


<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red")
      .slideUp(2000)
      .slideDown(2000);
  });
});
</script>
</head>

<body>

<p id="p1">jQuery 乐趣十足！</p>
<button>点击这里</button>

</body>
</html>

其实这种个上面的效果是一样的只是书写的格式有点变化因为jQuery 会抛掉多余的空格，并按照一行长代码来执行上面的代码行

xjwolaile

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6月7号工作（jquery停止动画、Callback 函数、Chaining在一个语句中有多个jquery有）...

今天的工作1、stop()[code="html5"] $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown(5000); }); $("#stop").click(function(){ $("#panel")....
复制链接

扫一扫

专栏目录