Tại sao fadeIn(), fadeOut(), hiển thị (400), ẩn (400) hoạt ảnh không hoạt động trong trường hợp của tôi?

Question

Tôi có một div hiển thị các thông báo mà người dùng nhận được, vấn đề là tôi muốn hiển thị chúng với hiệu ứng mờ dần và mờ dần khi người dùng nhận được thông báo và nhấp vào nó để xem nó.

Đây là HTML:

<li class="recentChatUser" onclick="createChatWindow('User',id);"> 
    <div class="user_data"> 
     <div class="foto_profilo_utenti_recenti_container"> 
      <img src="./userimg.jpg" class="user_photo"/> 
     </div> 
     <span class="userName">User name</span> 
     <div id="messages_notifications_$id$" class="message_notification">0</div> 
    </div> 
</li> 

Mỗi mục trong danh sách đại diện cho một người bạn của người dùng. Id div = "messages_notifications_ $ id $" ... chứa số lượng thông báo từ một người bạn cụ thể của người dùng, số lượng thông báo mà người dùng chưa đọc. $ Id $ là id không chính xác của người bạn của người dùng (do đó 0 đại diện cho div chứa tất cả các thông báo từ một người bạn của người dùng có id = 1, v.v.). Tôi khôi phục số lượng thông báo thực hiện cuộc gọi không đồng bộ bằng cách sử dụng phiếu thăm dò ý kiến ​​dài tới máy chủ trả về một json với tất cả các tin nhắn cho người dùng từ một người bạn cụ thể. Sau đó, tôi sử dụng JQuery cập nhật số lượng thông báo cho div bằng cách sử dụng id của bạn bè.

Mọi thứ hoạt động tốt trừ khi thông báo được hiển thị (tôi muốn nó được hiển thị theo cách fadeIn(), nhưng không, dường như fadeOut() được thực hiện nhưng không bị mờ trong hoạt ảnh, là khi có thông báo xuất hiện một cách hoàn hảo, thay vì fadeIn() như tôi đã nói) khi tôi nhấp vào một mục trong danh sách, tôi muốn làm cho id div = "messages_notifications_ $ id $" biến mất theo cách fadeOut() , sau đó tôi xóa các thông báo và đánh dấu chúng là đã đọc, nhưng fadeOut() không hoạt động (một lần nữa, thông báo div biến mất ngay lập tức, nhưng điều kỳ lạ nhất là fadeOut được gọi là nguyên nhân duy nhất tôi sử dụng biến mất thông báo div) ... Tôi đã thử ngay cả với chương trình (1000) thay vì fadeIn() và ẩn (1000) thay vì fadeOut, nhưng nó không hoạt động. Đây là mã nơi thông báo nên được thể hiện với một fadeIn() và khi tôi dọn dẹp thông báo và làm mờ dần các thông báo div:

var notifyUserWithNewMessages = function(notifications) { 
    for (var i = 0; i < notifications.length; i++) { 
      var notification = notifications[i]; 
      var notificationDiv = $("#messagges_notifications_" + notification.fromid); 
      notificationDiv.text(notification.counter); 

      console.log(notificationDiv); 
      // Showing the notification only if the list item is not selected and the notification div has display:none; 
      if (notificationDiv.css("display") == "none" && 
        !notificationDiv.parents("li.recentChatUser").hasClass("recentChatUserActive")) { 
        notificationDiv.fadeIn(1000); 
      } 
    } 
    return; 
}; 

Các notificationDiv được thể hiện ngay lập tức. Các var 'thông báo' là một mảng đơn giản của các đối tượng Plain javscript (nó được cập nhật sau mỗi yêu cầu async) và trông như thế này:

var notifications = [{counter:num, fromid:id, read:false}, 
        {counter:num, fromid:id, read:false}, 
         ...]; 

các truy cập thuộc tính là số lượng thông báo từ một người bạn đặc biệt của người dùng, thuộc tính fromid chứa id của người bạn mà tôi sử dụng để lấy div thông báo tương ứng, nơi tôi đặt số thông báo của bộ đếm với phương thức JQuery của .text (notification.couter).

Sau đó, khi người dùng nhấp vào mục danh sách:

$(".recentChatUser").on("click", function() { 
      if ($(this).hasClass("recentChatUserActive")) { 
        return; 
      } 
      $(".recentChatUser").each(function() { 
        if ($(this).hasClass("recentChatUserActive")) { 
          $(this).removeClass("recentChatUserActive"); 
          return; 
        } 
      }); 
      $(this).addClass("recentChatUserActive"); 

      var notificationDiv = $(this).find(".message_notification"); 
      if (notificationDiv.css("display") == "block") { 
        var fromid = notificationDiv.attr("id").match(/([0-9]+)$/); 
        clearNotificationsFromUser(fromid[0]); 
        console.log("I am fading out"); 
        notificationDiv.fadeOut(1000); 
      } 
    }); 

Các console.log trưng bảng hiệu "Tôi đang mờ dần ra" và div thông báo biến mất, nhưng một lần nữa ngay lập tức! Tại sao nó hoạt động như thế này? Tôi đang làm gì đó? Có thể khi tôi fadeIn() div tôi đang trong vòng lặp for và nó không hoạt động đúng? Nhưng những gì về fadeOut() gọi, tôi không ở trong một vòng lặp đó. Hoặc có lẽ là vì tôi có sự kiện onclick = "" trên mục danh sách? Tôi đã cố gắng loại bỏ nó, nhưng không có gì thay đổi. Bằng cách mà onclick jst tạo ra một cửa sổ chat khôi phục các tin nhắn từ máy chủ với một yêu cầu JSON (tôi đoán điều này không quan trọng với fadeIn(), fadeOut() của tôi).

Có thể là gì?

Cảm ơn sự quan tâm.

Tôi quên, đây là CSS của divs thông báo:

.message_notification { 
    display:none; 
    color:#FFFFFF; 
    text-align:center; 
    position:absolute; 
    top:0; 
    right:0; 
    height:20px; 
    min-width:20px; 
    background:#CC1414; 
    border-radius:50%; 
    text-shadow:1px 1px 0 rgba(0,0,0,.4); 
} 

EDIT: đây là fiddle ->http://jsfiddle.net/8WDqd. Nó hoạt động như mong đợi trong ví dụ này, nhưng tôi đang sử dụng một setInterval với dữ liệu tĩnh. Mã này chính xác giống như mã tôi sử dụng ngoại trừ việc tôi tải các thông báo với một cuộc gọi bỏ phiếu dài tới một dịch vụ web bằng cách sử dụng phương thức getJSON và gọi cho notifyUserWithNewMessages (thông báo) khi yêu cầu thành công trong hàm gọi lại thành công (data) {} của phương thức getJSON() JQuery. mọi chuyện sẽ ra sao? Là bị ràng buộc để gọi async này?

Mong một số trợ giúp!

Answer 1

Thật khó để kể từ khi jsfiddle của bạn hoạt động như mong đợi. Phải có một cái gì đó khác với mã của bạn so với fiddle đó là gây ra nó xảy ra. Gọi fadeIn() trong một cuộc gọi lại không nên tạo sự khác biệt xa như tôi biết.

Điều bạn có thể thử là đặt hẹn giờ để gọi 'fadeIn' để xem sự khác biệt của nó. Xem fiddle được cập nhật của bạn. Vì vậy, fadeIn nên được gọi bên ngoài cuộc gọi lại. Mã số:

function myFadeIn(elem) 
{ 
    elem.fadeIn(200); 
} 

var notifyUserWithNewMessages = function(notifications) { 
    ... 
    //notificationDiv.fadeIn(200); 
    setTimeout(myFadeIn,10,elem); 
    ... 
} 

Mặc dù, tôi nghĩ rằng điều gì đó khác có thể xảy ra, chúng tôi có thể xem mã gọi notifyUserWithNewMessages? Có bất kỳ mã nào khác có thể đang hoạt động trên div đó khiến nó được hiển thị ngay lập tức không? Bạn có thể xóa mã khỏi phiên bản không hoạt động cho đến khi bạn có thể làm cho nó hoạt động không, ví dụ: stub ra các cuộc gọi ajax, vv?

Tôi nhận ra rằng đây không phải là câu trả lời để cứu ngày, nhưng đó là nhiều hơn tôi có thể phù hợp và trình bày trong một nhận xét.