显示通知直到超时除非悬停(jQuery)

Show notification until timeout unless hovered (jQuery)

本文关键字：悬停 jQuery 通知 超时 显示      更新时间：2023-09-26

我正试图建立一个通知系统，我从UI/UX开始，我开始建立一个概念证明，但我正在努力调试我的超时。任何帮助都会很棒的。

JavaScript: 

  //Remove notification after 5 seconds
  var timer;
  new function(){
    timer = setTimeout(function(){
      removeNotification($notification);
    }, 5000);
  }
  //If any notification is hovered then start the timer again
  jQuery("#notificationList").hover(function (){
    clearTimeout(timer);
  });

new Function() {..} ->以这种方式声明函数会导致函数不被编译，并且可能比其他声明函数的方式慢。

所以，有一个生活，像下面。

//Remove notification after 5 seconds
var timer = false;
(function(){
    timer = setTimeout(function(){
        removeNotification($notification);
    }, 5000);
}());

和变化:

//If any notification is hovered then start the timer again
jQuery("#notificationList").hover(function (){
    clearTimeout(timer);
});

: 

//If any notification is hovered then start the timer again
jQuery("#notificationList").hover(function () {
    removeNotification($notification);
    timer && clearTimeout(timer);
});

因为clearTimeout不会运行，如果计时器最初没有设置。希望对你有帮助。

你的全部代码(因为我不能分叉你的笔):

//Notification markup
var notificationMarkup = '<li class="notification"><a href="#"><span class="image-wrapper"><img src="http://www.guestsofdave.com/images/scarlett%20johansson.jpg"/></span><span class="message-wrapper"><span class="message"><span class="info"><strong>Scarlett</strong> has replied to your <strong>forum post</strong>.</span><span class="meta"><i class="application forum"></i> <span class="notification-date">1 Hour Ago</span></span></span></span></a><span class="close-db-notification"></span></li>';
//CSS animation end hook
var animationEnd = "webkitAnimationEnd oanimationend msAnimationEnd animationend";
//Remove notification function
function removeNotification($notification) {
    $notification.addClass("animated zoomOut");
    $notification.animate({
        height: 0
    }, 150, function() {
        $notification.remove();
    });
}
//New notification
jQuery(".new-notification").click(function() {
    //Gets the last notification added
    var $notification = jQuery("#notificationList .notification").last();
    //Append the notification markup into the list
    jQuery("#notificationList").append(notificationMarkup);
    //Animate the notifications height from 0 to 90px and then animate it in
    $notification.animate({
        height: 90
    }, 150, function() {
        jQuery(this).css('visibility', 'visible');
        jQuery(this).addClass("animated zoomIn");
    });
    //Remove animation classes when animation ends
    $notification.on(animationEnd, function() {
        jQuery(this).removeClass("animated zoomIn")
    });
    //Remove notification after 5 seconds
    var timer = false;
    (function() {
        timer = setTimeout(function() {
            removeNotification($notification);
        }, 5000);
    }());
    //If any notification is hovered then start the timer again
    jQuery("#notificationList").hover(function() {
        removeNotification($notification);
        timer && clearTimeout(timer);
    });
});
//Remove notification on click
jQuery(document).on("click", ".close-db-notification", function() {
    var $notification = jQuery(this).closest(".notification");
    removeNotification($notification);
});
相关文章：