关于jQuery中的事件和动画

学jQuery的过程碰到的个人认为有点难理解的代码，在这里记下来：

代码如下：

 1 $(function() {
 2     $("panel").hover(function() {
 3         $(this).stop().animate({      // 如果在此时触发了光标移出的事件
 4             height: "300"             // 将执行下面的动画
 5                                       // 而非光标移出事件中的动画
 6         }, 200).animate({
 7             width: "200"
 8         }, 200);
 9     }, function() {                   // 以下是光标移出事件中动画代码段
10         $(this).stop().animate({
11             height: "22"
12         }, 200).animate({
13             width: "60"
14         }, 300)
15     }); 
16 })

这是一个常见的组合动画的例子，解决方案如下：

$(function() {
     $("panel").hover(function() { // 函数的第一个参数设置为 true
          $(this).stop(true).animate({      
             height: "300"             
                                        
          }, 200).animate({
              width: "200"
          }, 200);
      }, function() {                   
         $(this).stop(true).animate({
             height: "22"
         }, 200).animate({
             width: "60"
        }, 300)
     }); 
})

posted @ 2013-01-22 15:12 Jelon_Jang 阅读(146) 评论(0) 收藏举报

刷新页面返回顶部