jQuery動畫的衝突

我遇到了一些jQuery動畫的問題。jQuery動畫的衝突

我使用'mouseover'和'mouseout'直播活動動態創建了div，其中我只是使用帶有stop（）的animate（）方法更改div的不透明度，以防止隊列堆積。我有一個'關閉'按鈕內部的單擊事件，我只是讓div淡出，滑動，然後從DOM中刪除它。

問題是，如果我單擊按鈕，然後將鼠標移到div外（觸發'mouseout'事件），close（）方法會使淡出/上移動畫停止。該代碼是這樣的：

$(document).ready(function() { 

    $('.myDiv').live('mouseover mouseout', function(e) { 
     if (e.type == 'mouseover') { 
      $(this).stop().animate({ opacity : '1' }); 
     } else { 
      $(this).stop().animate({ opacity : '.5' }); 
     } 
    }); 

    $('.myDiv .close').live('click', function() { 
     $(this).closest('div').fadeOut('slow', function() { 
      $(this).slideUp('slow', function() { 
       $(this).remove();  
      }); 
     }); 
    }); 

});

我已經嘗試過動畫之前使用解除綁定（）方法，並移除一些其他的東西，如添加一個類到div，然後在「鼠標移開檢查'的事件，但他們都不能解決問題（如果我將鼠標移出太快，淡出/上移動畫仍然停止）。

有沒有人知道一個好方法來防止這種情況發生？

來源

2010-09-13 martins

你可以調整你的處理程序有點像這樣：

$(function() { 
    $('.myDiv:not(.closing)').live('mouseenter mouseleave', function(e) { 
    $(this).stop().animate({ opacity : e.type == 'mouseenter' ? 1 : 0.5 }); 
    }); 

    $('.myDiv .close').live('click', function() { 
    $(this).closest('div').addClass('.closing').fadeOut('slow', function() { 
     $(this).slideUp('slow', function() { 
     $(this).remove();  
     }); 
    }); 
    }); 
});

這樣做是首先使用mouseenter和mouseleave事件（如.hover()映射到）進入/離開孩子時不火。關閉時，我添加了一個類「關閉」，其中.live()處理程序選擇器篩選出來...所以在關閉時，.live()事件處理程序不會觸發，從而防止它們干擾。

而且，我還沒有刪除它上面，但.slideUp()沒有做任何事情，因爲它已經display: none在.fadeOut()末，這樣你就可以刪除.slideUp()電話，除非你打算別的東西在這裏。

來源

2010-09-13 01:23:12

感謝您的快速回復尼克，這正是我一直在尋找的！關於slideUp（），我沒有使用fadeout（）效果，正如我在文章中所說的那樣，我實際上只是動畫了div的不透明度，所以在動畫結束時div只是看不見的，但不能顯示：none，並且我使用slideUp（）效果來爲要移除的div下面的div製作動畫效果，如下所示：http://return-true.com/examples/jquery-wp-delete.html – martins 2010-09-13 14:43:53

jQuery動畫的衝突

回答

相關問題