2012-03-30 79 views
0

我在上半场工作得很好。当我试图在完成函数中添加一个.mouseleave时,它只是将整个事情冻结起来。任何人都可以看到我搞砸了吗?Jquery Animate由于某种原因不能工作

$(document).ready(function() { 
    $('#TwitterBox').mouseenter(function(event) { 
     $(this).animate({ 
      top: 0 
     }, { 
      duration: 'slow', 
      easing: 'easeOutBack', 
      complete: function() { 
       $('#TwitterBox').mouseleave(function(event) { 
        $(this).animate({ 
         top: 550 
        }, { 
         duration: 'slow', 
         easing: 'easeOutBack' 
        }); 
       }); 
      } 
     }); 

    }); 
});​ 

这里是CSS

#TwitterWrap{ 
    background-color: #999; 
    height: 500px; 
    width: 300px; 
    overflow: hidden; 
    position: absolute; 
    right: 25px; 
    bottom: 25px; 
} 
#TwitterBox{ 
    background-color: #0FC; 
    height: 400px; 
    width: 300px; 
    position: relative; 
    top: 450px; 
} 

本质上只是想上滑动.mouseenter一个div并在.mouseleave

+0

你为什么像这样嵌套事件?看起来不正确... – elclanrs 2012-03-30 05:47:38

+0

这只是它,我不认为是。我得到了大括号。我现在的结果是JSlint告诉我的是有效的。 – Greg 2012-03-30 05:49:47

+0

我想通了。明天他们允许我回答我自己的问题 – Greg 2012-03-30 06:05:42

回答

-1
I figured it out 
$(document).ready(function() { 
$('#TwitterBox').mouseenter(function() { 
    $(this) 
     .animate(
      { top: 50 }, { 
       duration: 'slow', 
       easing: 'easeOutBack', 
       complete: (function() { 
$('#TwitterWrap').mouseleave(function() { 
    $('#TwitterBox') 
     .animate(
      { top: 425 }, { 
       duration: 'slow', 
       easing: 'easeOutBack', 
      }) 
    }); 
    }) 
     }) 

}); 

});

0

回落我不明白的动画。这可能有助于

$(document).ready(function() { 
    $('#TwitterBox').mouseenter(function(event) { 
     $(this).animate({ 
      top: 0 
     }, { 
      duration: 'slow', 
      easing: 'easeOutBack' 
     } 
     ).mouseleave(function(event) { 
       $(this).animate({ 
        top: 300 
       }, { 
        duration: 'slow', 
        easing: 'easeOutBack' 
       }); 
      }); 
    });​ 
}); 

,点击这里为DEMO

相关问题