13518219792
这篇文章主要介绍“jQuery中动画的实现方法”，在日常操作中，相信很多人在jQuery中动画的实现方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”jQuery中动画的实现方法”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
创新互联是一家专注于成都网站建设、网站设计与策划设计,象州网站建设哪家好?创新互联做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:象州等地区。象州做网站价格咨询:13518219792
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)//括号内为时间参数
除此之外还有其他的动画方法
toggle(speed,[callback])：切换元素的可见状态
slideToggle(speed,[easing],[callback])：通过高度变化来切换可见状态
fadeTo(speed,opacity,[callback])：可以把元素的不透明度以渐进的方式调整到指定的值
fadeToggle(speed,[easing],[callback])：通过不透明度变化来切换元素的可见性
到此，关于“jQuery中动画的实现方法”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！
