Question

当鼠标悬停在元素上时，我尝试使用while循环对HTML元素进行脉冲（淡出/淡出），但是当触发.hover（）事件时，网页会一直崩溃。我似乎无法识别代码中的错误。任何帮助或替代建议将不胜感激。代码如下：

function pulse(selector) {
    var pulsing = true;
    while(pulsing) {
        $.when(
            $(selector)fadeOut(1000),
            $(selector)fadeIn(1000)
        ).done(function() {
            if(!$(selector).is(":hover")) {
                pulsing = false;
            }
        });
    }   
}

Answer 1

你真的不能像这样使用while循环 - 我认为它太快了＃34;对于那些消退并超载浏览器的消息。总的来说（当我第一次从其他语言来到JS时，这是我误解的）你不能像在其他语言中那样在循环方面考虑JavaScript中的动画效果。不要在切线上，但对于你需要不断更新/＆＃34;循环通过＆＃34;在页面运行时，使用setInterval（）。

在这种情况下，我认为最好/最简单的事情可能是使用CSS动画，虽然显然旧版本的IE不支持它：

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0; }
100% { opacity: 1; }
}

@-webkit-keyframes pulse {
   0% { opacity: 1; }
  50% { opacity: 0; }
100% { opacity: 1; }
}

.selector {
   /*-- whatever --*/
}

.selector:hover {
   animation: pulse 0.5s infinite;
   -webkit-animation: pulse 0.5s infinite;
}

以下作为小提琴：http://jsfiddle.net/2Wbx2/

如何脉冲HTML元素

1 个答案: