jQuery中动画的实现方法

这篇文章主要介绍“jQuery中动画的实现方法”，在日常操作中，相信很多人在jQuery中动画的实现方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”jQuery中动画的实现方法”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

jQuery是个快速、简洁的JavaScript框架，封装了JavaScript的常用功能，提供了一种简便的JavaScript设计模式，优化HTML文档操作，事件处理，动画设计和ajax交互，其中最核心的包括DOM和BOM，但是提供最方便的操作我认为是动画，这也是jQuery最吸引人的地方之一，通过jQuery的动画能够快速轻松的为网页提供非常精彩的视觉效果

• show和hide

show和hide方法是jQuery中最基本的动画方法，在一个元素调用hide时，其实在HTML文档中会将该元素的display样式改为“none”

$("#id").hide()

其实等于

$("#id").css("display","none")

当元素隐藏起来以后，使用show将元素的display样式设置为先前的显示状态"block"/"inline"

我们可以使用toggle（模拟连续点击事件）来实验这两个方法

$(function(){
 $(#one).toggle(function(){
    $(this).next().hide();
},function(){
    $(this).next().show();
})
})

同时我们也可以在show里面放一个参数“显示速度”

$("#id").hide(1000)

让元素在1000毫秒内显示出来

• fadeIn和fadeOut

和show不一样的是，fadeIn和fadeOut只改变元素的不透明度，fadeOut通过透明度让元素的display为none，fadeIn相反

$(function(){
 $(#one).toggle(function(){
    $(this).next().fadeOut();
},function(){
    $(this).next().fadeIn();
})
})

• slideUp和slideDown

slideUp和slideDown方法只会改变元素的高度，slideUp通过高度让元素的display为none，slideDown则相反

$(function(){
 $(#one).toggle(function(){
    $(this).next().slideUp();
},function(){
    $(this).next().slideDown();
})
})

• animate(params,speed,callback)

params：一个包含样式属性及值的映射

speed：速度，可选

callback：动画完成时执行的函数，可选

$(function(){
 $(#one).click(function(){
   $(this).animate({left:"+=500px"},3000,function({
   $(this).css("border","5px solid blue");
   });
})
})

可以看到，animate几乎可以做到任意的改变动画，甚至上面说的slideUp，slideDown,fadeIn,fadeOut都可以改变成animate来实现

这样看，好像很完美，但是有一个问题，这个问题也是所有动画的问题，以上面的代码为例子，当一个用户点击一下就执行"+=500px"，如果用户3秒内点击了100次呢，1000次呢，动画还会继续执行，但是这个时候如果再点击其他的按钮就会被队列挤到后面去，需要等这个动画全部执行完毕才会执行，这就需要判断是否处于动画状态和停止动画

if(!$(#two).is(":animated")){
{

用上面的代码就可以执行，先判断是否处于动画状态，如果没有则添加新的代码

但是光知道是否处于动画状态还不够，还需要停止动画

$(function(){
 $(#one).hover(function(){
    $(this).stop().next().slideUp();
},function(){
    $(this).stop().next().slideDown();
})
})

延迟动画

delay(1000)//括号内为时间参数

除此之外还有其他的动画方法

1. toggle(speed,[callback])：切换元素的可见状态

2. slideToggle(speed,[easing],[callback])：通过高度变化来切换可见状态

3. fadeTo(speed,opacity,[callback])：可以把元素的不透明度以渐进的方式调整到指定的值

4. fadeToggle(speed,[easing],[callback])：通过不透明度变化来切换元素的可见性
   

到此，关于“jQuery中动画的实现方法”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！