jquery 简单的动画效果

最新推荐文章于 2020-01-11 14:46:36 发布

weitao_11

最新推荐文章于 2020-01-11 14:46:36 发布

阅读量429

点赞数

分类专栏： html 文章标签：动画 jquery

本文链接：https://blog.csdn.net/weitao_11/article/details/48266175

版权

html 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

在html中默认的所有的元素都是不能动的所以要实现动画效果，必须要将positon 设置为 fixed relative absolute 才能实现

$(".ex .hide").click(function(){
    $(this).parents(".ex").animate({
        top:'-=150px',
        opacity:'0'
    }, "slow");
    $(this).parents(".ex").fadeOut(100);
});

动画在执行完成之后动作才会继续往下做

之前找过实现一个div在向上滑动一段距离后消失，一直没找到，现在算是如愿了。

animate 在实现的时候位置可以用相对的也可以用绝对的绝对的就不要说了只要将top 什么的写上px就行了，相对路径的话就要在前面加上 -= 或者 += 来实现。

opacity 是表示透明度然后在将div样式改一改

<div class="ex" style="position: relative; left: 35%;">
    <button class="hide" type="button">隐藏</button>
    <img src="2015052701/1.jpg">
</div>

就能实现动画的上浮效果。

如果效果要分开，比如要先变大后变小什么的只要写两个 animate就行了。

他就是一个顺序结构在不执行完当前代码的时候是不会继续执行下面的代码的。

在实现完动画之后如果要进行一个函数的运用，不能直接调用那个函数的名字而是要这么写

$(this).parents(".ex").fadeTo(3000, 0.5, function(){tt()});

其中里面的那个tt（）就是你写的函数的内容，不能直接去调用 tt（）；

最后如果你就得写那么多$(this)什么的太麻烦。。好吧你还可以这么干

$("button").click(function(){
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
});

这样也是实现的方式是不是很简单～～～

在实现动画的过程中有时候需要停下来看一下动画然后截图，或者动画已经看过好多遍了不想再看了要跳过就要用到 stop功能了。

实现stop也很简单，只要在你想要停止的地方加上这个函数就行

$(".ex .stop").click(function(){
    $(this).parents(".ex").stop(true, true);
});

如上是停止父亲ex 的动画效果，stop 有两个参数，当两个都不填的时候表示停止当前的动画效果，在只填一个的时候，表示停止所有在排队的动画效果包括当前的动画，在两个都填的时候是表示完成当前的效果并且停止所有的动作。

当然能填true当然能填false 在第一个为false 第二个为true的时候就会立刻结束当前的操作，并且继续执行下面的动画。多点几下动画就结束了～～

发先了个比较叼的东西能同步执行

这是两种做法，上一种是能在前一秒不变透明度，后一秒改变透明度但在这两秒的时间段内一直上升

下一种是一直上升但是透明度也一直在变化。

.delay(1000, "fader")是表示fader 这个名字的队列要延迟一秒钟执行。

.queue 就像是一个队列，他会顺序执行队列里的代码。

.dequeue("fader") 表示开始执行fader 这个名字的队列。在实现功能的时候， queue：false 是比较重要的一部分，他会将queue 从默认的队列中拿出来从而实现同步操作。

还有就是在实现这项目的时候

$('div').slideUp('slow').slideDown('slow').css({"background":"red"});

和下面

$('#object').slideUp('slow').slideDown('slow').queue(function(){
$('#object').css({"background":"red"});
$(this).dequeue();
});

是不同的， slideup 和 slidedown 是在相同的队列里面的东西他们都在 fx 队列中，而css 并不是在那个队列里面的东西，所以在实现的时候会有问题那就是css是先于动画执行的，所以上面的话会先变换颜色然后执行动画效果，而在下面这个的话，因为是将这些都统一放到queue 里面了所以在实现的时候就会按照顺序来执行。

还有另一种写法就是

$('#object').hide('slow').queue(function(next){
$(this).appendTo($('#goal'));
next();
}).show('slow');

其中的next（）就是相当于上面的 dequeue 。他们的作用是继续执行下面队列里的东西，如果不写这个函数的话就会出现一个问题那就是你会发现下面队列里的东西没有执行了，因为这就相当于是结束了当前的队列。你都结束了谈什么继续执行。

完成的说明在其他博客上能看见：http://www.cnblogs.com/hh54188/archive/2011/04/09/1996469.html