2011-03-07 43 views
2

我試圖做一個3階段的動畫,其中打開框最小化,他們都向左滑動,並單擊框擴展。最後的動畫,選中的方框展開,當它被稱爲第二個動畫的參數時重複3次,但如果我單獨調用它,它會正常工作。jQuery animate()重複3x

其在http://st-catherineschool.org/xbox/

$("#box2").click(
    function(){ 
     box = 2; 
     if(boxopen==box)return; 
     $("#box"+boxopen).animate({height:"-=30%", width:"-=10%", top:"+=20%", fontSize:"14px"}, 500, null, 
     function(){ 
     $("section").animate({right:"+=25%"},500,null, 
     function(){ 
      $("#box"+box).animate({height:"+=30%", width:"+=10%", top:"-=20%"}, 500); 
      $("#box"+boxopen).css("z-index", "8"); 
      $("#box"+box).css("z-level", "9"); 
      boxopen = box; 
     }); 
     }); 
    }); 

回答

0

我認爲你正在尋找jQuery#stop(),它停在匹配的元素任何當前正在運行的動畫。嘗試使用.animate()之前調用.stop(),像這樣:

// instead of: 
$('section').animate(…); 
// try this: 
$('section').stop().animate(…); 
+0

這不是停止動畫的問題,它是DOM Bubbling的一個問題! – RobertPitt

+0

添加.stop()沒有改變,我不認爲它的冒泡,因爲答案1也沒有幫助。 – austin

+1

我的不好,你是對的,你只是把它與你的例子中的錯誤選擇器。當我把它放在(「#box」+ box)中時,AKA#box2在最後一個函數中,它的工作原理就是我想要的。 – austin

1

我不知道你的HTML的樣子,但它可能是你的點擊冒泡到其他元素,造成這種現象主持。爲了防止這種情況,使用stopPropagation()

EX:

$("#box2").click(
    function(e){ 
     e.stopPropagation(); 
     box = 2; 
     ..... 
+0

完整的網頁是在http://st-catherineschool.org/xbox/但#BOX2是 – austin

+0

e.stopPropagation空

()改變不了什麼在第一個函數中,但是如果我將它放在其他函數中,那些函數中的動畫就不會發生 – austin