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中动画的实现方法”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联-成都网站建设公司网站,小编会继续努力为大家带来更多实用的文章!

网站题目:jQuery中动画的实现方法-创新互联
分享网址:https://www.cdcxhl.com/article38/cojgpp.html

成都网站建设公司_创新互联,为您提供建站公司品牌网站设计网站营销域名注册虚拟主机网站收录

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都seo排名网站优化