Neden fadeIn(), fadeOut(), show (400), sakla (400) animasyonlarım benim durumumda çalışmıyor?

Question

Kullanıcının aldığı bildirimleri görüntüleyen bir div var, sorun, kullanıcı bunu bildirimi aldığında ve onu görmek için tıklattığında, sırasıyla bir soluk ve sönme efekti göstermek istediğimdi.

<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> 

Her liste öğesi kullanıcının bir arkadaşı temsil:

Bu

HTML. div id = "messages_notifications_ $ id $" ... kullanıcının belirli bir arkadaşından gelen bildirim sayısını, kullanıcının henüz okumadığı bildirim sayısını içerir. $ Id $, kullanıcının arkadaşının tekdüze bir id'sidir (bu nedenle 0, kimliği belirten bir arkadaşının tüm bildirimlerini içeren div'u temsil eder, vb.). Belirli bir arkadaşından kullanıcıya tüm iletilerle birlikte bir json döndüren bir sunucuya uzun yoklama kullanarak eşzamansız çağrı yapan bildirimlerin sayısını kurtarıyorum. Sonra JQuery kullanarak arkadaşların kimliğini kullanarak bildirimlerin sayısını div'a güncelleştiririm.

Her şey, bildirimin gösterileceği durumlar dışında harika çalışır (FadeIn() biçiminde gösterilmesini isterim, fakat öyle değil, fadeOut() yürütüldüğü halde animasyonda hiç solmaz bir bildirim var dedikten sonra, fadeIn() 'in yerine, listenin bir öğesinin üzerine tıkladığımda div id = "messages_notifications_ $ id $" yapmak istiyorum fadeOut() bir şekilde kaybolur Daha sonra, bildirimleri temizlerim ve bunları okundu olarak işaretlerim, fakat fadeOut() işe yaramazsa (yine, bildirimler bölümü hemen kaybolur, ancak en garip olan şey, fadeOut'un çağrılmasıdır çünkü bu, kullandığım tek yöntemdir. bildirimleri ortadan kaldırmak)) ... FadeIn() yerine show (1000) ile çalıştım ve fadeOut yerine (1000) gizledim ama işe yaramadı.

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; 
}; 

notificationDiv hemen gösterdi: Bu bildirim bir fadeIn ile gösterdi edilmelidir() ve ben bildirimleri div bildirimleri temizlemek ve fade out zaman kodudur. 'Bildirim' var Düz Javscript nesnelerin basit bir dizidir (her zaman uyumsuz isteğinden sonra güncellenir) ve şöyle görünür:

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

sayaç niteliği kullanıcının belirli bir arkadaşımdan bildirimlerin sayısı ise, fromid özniteliği, karşı tarafın bildirim numaralarını .text (notification.couter) Jquery yöntemiyle koyduğum ilgili bildirim divisini almak için kullandığım arkadaşın kimliğini içerir.

Sonra zaman liste öğesinin tıkladığında:

$(".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); 
      } 
    }); 

console.log ama yine hemen "Ben dışarı soluyorum" ve bildirim div kaybolur görüntüler! Neden böyle davranıyor? Bir şey mi karıştırıyorum? Belki de ben fadeIn() div for for döngüsündeyim ve düzgün çalışmıyor? Ama fadeOut() çağrısı hakkında, orada bir döngüde değilim. Veya belki de liste öğesinde bir onclick = "" olayım var mı? Onu kaldırmaya çalıştım ama hiçbir şey değişmedi. Bu onclick jst bir JSON isteği ile sunucudan mesajları kurtarma bir sohbet penceresi oluşturur (Bu benim fadeIn(), fadeOut() sorunu ile önemli değil sanırım).

Bu ne olabilir?

Dikkatiniz için teşekkür ederiz.

Unutmuşum

, bu bildirim divs CSS:

.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); 
} 

DÜZENLEME: Burada keman olduğunu ->http://jsfiddle.net/8WDqd. Bu örnekte beklendiği gibi çalışır, ancak statik verileri olan bir setInterval kullanıyorum. Kod, getJSON yöntemini kullanarak bir web servisine uzun bir yoklama çağrısı ile bildirimleri yüklediğim ve isteğin işlevde başarılı olması durumunda notifyUserWithNewMessages (bildirimleri) çağrısı dışında kullanacağımla aynıdır (veri) {} başarı geri dönüşü getJSON() JQuery yönteminin. Öyleyse ne olabilir? Bu uyumsuz çağrıya bağlı mı?

Yardımlarınız için umarım!

Answer 1

Jsfiddle'ınızın beklendiği gibi çalıştığını söylemek zor. Kodunuzda, ortaya çıkmasına neden olan kemanla karşılaştırıldığında farklı bir şey olmalı. Bir geri aramada fadeIn() çağrısının, bildiğim kadarıyla bir fark yaratmaması gerekir.

Deneyebileceğiniz bir şey, ne tür bir fark yarattığını görmek için 'fadeIn' adını vermek üzere bir zamanlayıcı ayarlıyor. Güncelleştirilmiş fiddle'a bakın. Yani, fadeIn geri arama dışında çağrılmalıdır. Kod:

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

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

ama ben biz notifyUserWithNewMessages çağıran kodu görebilirsiniz başka bir şey muhtemelen devam ettiğini sanıyorsun? Bu div üzerinde hemen gösterilmesine neden olabilecek başka bir kod var mı? Çalışmayacak duruma gelene kadar çalışmayan sürümü koddan çıkarabilirsiniz, ör. ajax çağrısı, vb?

Bunun, günü kurtarmak için bir at binme olmadığını anlıyorum, fakat bu, bir yoruma uygun ve sunabileceğimden daha fazlası.