您当前的位置: 站长圈 > 网页前端

jQuery中的动画和事件

来源:站长圈|0 作者:adminzzq 点击: 0
一,动画
1,show(speed, [callback]),hide(speed, [callback]);
    $obj.show():显示$obj这个jquery对象.
    $obj.hide();隐藏$obj这个jquery对象.
    css display:block,none.
    width:0
    height:0
    opacity.0
 
实例:

 



<script type="text/javascript">
          function _show(){
                   $('#box').show();
          }
          function _hide(){
                   $('#box').hide();
          }
</script>

解析:show()和hide()方法实际上就是对调用它的Jq对象的css中的display属性设置block还是none,在外形上就是对它的宽度、高度和不透明度的改变。要使这样的变化有个过渡,可以设置它的参数,它的参数有两种表示方法:
1、  速度的常量:fast(200ms),normal(400ms),slow(600ms) 如;$('#box').hide(‘slow’);
2、  数值:1000(毫秒)如:$('#box').hide(3000);
这两种参数在其它有关动画的方法中都是通用的。
从效果可以看出,当此次动画慢慢显示或隐藏时,是宽、高和不透明度同时变化的。
 
还有,show()和hide()方法除了速度这个参数,还有一个回调函数的参数,它指的是当动画结束以后还要做什么(fadeIn(),fadeOut(),slideUp(),slideDown()方法也都有这个参数,后面不一一介绍了),如:
function _hide(){
                   $('#box').hide(3000,function(){
                            $(this).show(1000);
                   });
         }
解析:这个例子中,红色盒子在3秒之内慢慢隐藏了,然后它又在1秒内慢慢显示了。
 
2,fadeIn(),fadeOut()
    $obj.fadeIn(); 渐入.
    $obj.fadeOut();渐出.
    通过不透明度的变化来实现$obj的淡入效果,这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化
fadeOut动画完成的时候display:none;
实例:

 



<script type="text/javascript">
          function _fadeIn(){
                   $('#box').fadeIn(3000);
          }
          function _fadeOut(){
                   $('#box').fadeOut(3000);
          }
</script>
解析:当你浏览效果的时候你会看到,它不同于“隐藏”和“显示”方法之处在于“渐入”“渐出”改变的是不透明度,在改变不透明度的时候宽高是不变的,一直到不透明度变成0,最后也变成了display:none
 
3,slideUp(),slideDown()
通过高度变化(向上减小up或向下增大down)来动态地隐藏或显示$obj
slideUp动画完成的时候display:none
实例:

 



<script type="text/javascript">
          function _slideUp(){
                   $('#box').slideUp(3000);
          }
          function _slideDown(){
                   $('#box').slideDown(3000);
          }
</script>
解析:这个动画的过程只是高度的改变,和宽度或者不透明度无关。
 
4,$obj.animate({'width':100+'px','left':'80px','top':'50px'},600[,callback])
    第一个参数是一个对象,这个对象描述了方法调用者的最终状态.
 
    前面的函数都可以加上一个可选的回调函数.
回调函数将会在动画结束的时候调用.
实例:

 


<script type="text/javascript">
          function _animate(){
                   $('#box').animate({
                            width:'30px',
                            height:'30px',
                            left:'300px',
                            top:'200px',
                            borderWidth: '10px '
                   },1000);
          }
</script>
解析:这个自定义动画里有2个参数,第一个参数是个对象,用大括号括起来,既然是动画,总要有一个状态向另一个状态的变化过程,这个大括号里不是动画的最初状态,而是动画结束时的状态(可能也不是它的最终状态,因为还有第3个参数,下个例子会介绍)
这个例子中动画的最初状态是在css里规定的,宽100px,高100px,背景红色,四周边框都为1px蓝色的实线,当然,为了结束状态里的left、top属性能起作用,css里还定义了一个绝对定位。动画的结束状态是animate()方法的第一个参数规定的,也就是那个红色的孩子会一边向右下角(离左边300px,离上边200px)移动一边慢慢变小(宽高为30px),边框变成10px。这里要注意书写的语法问题,属性名和属性值之间是冒号,属性值用引号引起来(如果只是数字也可以不要引号),一组属性之间用逗号分隔,最后一组后面不要逗号,如果属性名中间有横杠的就采用骆驼形式如border-width写成borderWidth
第2个参数就是动画执行的时间喽,你想用数值和常量都可以。
 
加上第3个参数试试:
<script type="text/javascript">
          function _animate(){
                   $('#box').animate({
                            width:'30px',
                            height:'30px',
                            left:'300px',
                            top:'200px',
                            borderWidth: 10
                   },1000,function(){
                            $(this).hide();
                   });
          }
</script>
解析:第3个参数是个回调函数,它的作用是当前面的结束状态在规定时间完成以后,你还想做什么事。这个例子中当1秒钟之内红色盒子一边移动一边变小以后,我们让它最后消失不见了(hide()),当然在这个回调函数里你可以继续使用自定义动画的方法,做出更复杂的动画,这就要看你想做什么了:
<script type="text/javascript">
          function _animate(){
                   $('#box').animate({
                            width:'30px',
                            height:'30px',
                            left:'300px',
                            top:'200px',
                            borderWidth: '10px'
                   },1000,function(){
                            $(this).animate({left:'600px',top:'0px'},1000);
                   });
          }
</script>
 
5,stop(true,true);停止动画.
    第一个参数是否停止指定元素的动画队列.
    第二个参数是否让元素停止时候的状态为动画队列的最终状态
         实例:
         
        
 






 
<script type="text/javascript">
         function _animate(){
                   $('#box').animate({left:'600px'},5000).animate({width:'300px'},2000).animate({height:'300px'},2000)
         }
         function _stop1(){
                   $('#box').stop();//不管当前动画执行到哪里,都立刻结束正在执行的动画,停止在当前位置,接着当前位置继续下一个动画
         }
         function _stop2(){
                   $('#box').stop(true);//停止在当前位置不动,后面有再多的动画也不管不执行
         }
         function _stop3(){
                   $('#box').stop(false,true);//不管当前动画执行到哪里,都立刻结束正在执行的动画,马上跳到当前动画的最后,然后继续下一个动画
         }
         function _stop4(){
                   $('#box').stop(true,true);//不管当前动画执行到哪里,都立刻结束正在执行的动画,马上跳到当前动画的最后,不再继续下一个动画,后面有再多的动画也不管不执行
         }
</script>
解析:从这个例子中可以看出,后面的动画会不会执行在于第一个参数,当第1个参数是true时后面的动画是不执行的,false时就会执行;而第二个参数是决定当前动画是不是马上结束的(配合第一个参数,还可以决定当前动画是停止在当前位置还是跳到当前动画的最后)。没有参数就是默认(false,false),只有一个true就是(true,false)
 
6,$obj.is(':aniamte'); 根据选择器、DOM元素或jQuery 对象来检测匹配元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合,或者表达式无效,都返回'false'。
         实例:
        
        
 

 



<script type="text/javascript">
         function _animate(){
                   $('#box').animate({left:'400px'},5000)
         }
         function _fadeOut(){
                   $('div:animated').fadeOut(3000);
                   $('div:not(:animated)').animate({width:'300px'},2000)
         }
</script>
解析::animated可以匹配正在执行动画效果的元素,这个例子中,我们筛选了div中正在执行动画的元素3秒内淡出,而不在执行动画的那个div在2秒内宽度拉伸为300px
        
         实例:
        
        
 

 



<script type="text/javascript">
         function _animate(){
                   $('#box').animate({left:'400px'},5000)
         }
         function _is(){
                   if($('div').is(':animated')){
                            alert('有动画');
                   }else{
                            alert('没有动画');
                   }
         }
</script>
解析:is()方法返回是一个布尔值,参数可以是选择器、DOM元素或jQuery 对象。这个例子中,我们判断页面中的2个div中有没有正在执行动画效果的
 
7,slideToggle();
通过高度的变化来切换效果.
实例:

 


<script type="text/javascript">
          function donghua(){
                   $('#box').slideToggle(3000);
          }
</script>
解析:之前我们学过toggle(function(){},function(){}[,.....]);通过n个函数来切换动画效果,具体效果由函数来决定,而slideToggle()方法如同前面介绍过的slideUp()和slideDown()一样只是在这两种方法之间切换,改变的只是对象的高度,是两种方法合并起来的效果。
参数的使用也和那两种方法一样,速度参数可以是数值也可以是常量,也有一个回调函数的可选参数。
 
8,fadeToggle();
通过透明度的变化来切换效果.
解析:这个方法和上面一个例子是异曲同工的,只是它是在fadeOut()和fadeIn()之间切换,改变的是对象的不透明度。
 
二,事件.
    window.load
(1)$(document).ready(function(){
 
    });
(2)$(function(){
 
})
解析:在js中页面加载是用window.load,jq中有以上两种写法,当你只使用了一个库的时候,我们一般用第二种简单的方法,不过如果你有时候使用了2个库,那么$就会冲突,所以你必须使用第1种方法。另外,js里的原生方法只能绑定一次,而jq可以绑定多次。
 
    $obj.bind('事件',fn);
    给$obj这个元素绑定bind()的第一个参数所指定的事件.
    当事件发生的时候执行第二个参数所指定的方法:click,focuse,blur,change,keypress,keyup,keydown,mouserover,还可以自定义函数名。
         实例:
        
        
 

<script type="text/javascript">
                   $('#box').bind('mouseover',function(){
                            $(this).css('background','green');
                   })
                   $('#box').bind('mouseout',function(){
                            $(this).css('background','blue');
                   })
</script>
解析:第1个参数是含有一个或多个事件类型的字符串,由空格分隔多个事件,第2个参数是个函数,表明触发了事件以后你想做什么。绑定多个事件的方法具体可以看手册。
 
除此之外,很多事件也有自己的方法,如
click()
    hover(fn,fn)
    focuse()
    blue()
    change();
    keypress()
    keyup()
    keydown()
mouserover()
实例:

 

<script type="text/javascript">
                   $('#box').hover(function(){
                            $(this).css('background','green');
                   },function(){
                            $(this).css('background','blue');
                   })
</script>
解析:这个例子可以理解为上一个实例的另一种写法,hover(fn,fn)里的第一个函数是鼠标经过时执行的动作,第二个函数是鼠标离开时执行的动作。
  
event.preventDefault();阻止浏览器默认行为
         实例:
         路航网络培训
<script type="text/javascript">
                   $('a').click(function(e){
                            e.preventDefault();//阻止浏览器默认行为
                            $(this).css('background','pink');
                   })
</script>
解析:浏览器有自己的默认行为,比如超链接,点击以后就会转向到一个指向的页面,在这个例子中,我们给a标签使用了click()方法,当鼠标点击时会改变调用对象自己的背景颜色,但我们并不想跳转到其他页面,这时候就可以用preventDefault()方法,注意这个方法的调用者是函数里传的一个参数,该参数是一个event对象。
 
         event.stopPropagation();停止事件冒泡
实例:

路航网络培训
<script type="text/javascript">
                   $('a').click(function(e){
                            e.preventDefault();//阻止浏览器默认行为
                            e.stopPropagation();//停止事件冒泡
                            $(this).css('background','pink');
                   })
                   $('body').click(function(){
                            alert('我是body');
                   })
</script>

解析:什么是冒泡?在之前学的第11课”js事件”中我们已经详细说过。在这个例子中,在body和a标签上各绑定了一个事件,而body是a标签的父元素,不可避免的,当我们点击了a标签的时候也同时触发了body上绑定的事件。这并不是我们所希望的,我们只想要触发a标签上绑定的事件,也就是改变它的背景颜色就行了,所以我们就要用到stopPropagation();停止事件冒泡的方法。这里也要注意它的调用者是谁哦。
 
 
   事件捕获:
    jquery并不处理事件的捕获.