2012-03-30 93 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

相關問題