在div上jQuery“闪烁高亮”效果？

Question

我正在寻找一种方法来执行以下操作。

我给页面添加一个<div>，并且ajax回调函数返回一些值。 <div>填充了来自ajax调用的值，然后将<div>预先添加到另一个作为表列的<div>。

我想获得用户的关注，以向她/他显示页面上有新内容。
我想<div>眨眼，不显示/隐藏，但突出/不高亮一段时间，让说5秒。

我一直在看blink插件，但据我所见，它只显示/隐藏在一个元素上。

顺便说一句，该解决方案必须是跨浏览器，是的，不幸的是包括IE浏览器。我可能不得不在IE中使用它，但总的来说它必须工作。

Answer 1

jQuery用户界面高亮效果是你在找什么。

$("div").click(function() { 
     $(this).effect("highlight", {}, 3000); 
}); 

的文档和演示可以发现here

编辑

也许脉动效应是比较合适的，看到here

编辑＃2

要调整操作你可以做到这一点：

$("div").click(function() { 
    // do fading 3 times 
    for(i=0;i<3;i++) { 
    $(this).fadeTo('slow', 0.5).fadeTo('slow', 1.0); 
    } 
}); 

所以它不会低于50％的不透明度。

Answer 2

你可能想看看jQuery UI。具体来说，高亮效果：

http://jqueryui.com/demos/effect/

Answer 3

在http://jqueryui.com/demos/effect/看看。它有一个名为pulsate的效果，它可以完成你想要的功能。

$("#trigger").change(function() {$("#div_you_want_to_blink").effect("pulsate");}); 

Answer 4

对于那些不希望包括整个jQuery UI的是谁，你可以使用jQuery.pulse.js代替。

要具有循环改变不透明度的动画，这样做：

$('#target').pulse({opacity: 0.8}, {duration : 100, pulses : 5}); 

它重量轻（小于1KB），并允许您循环任何形式的动画。

Answer 5

如果你不想要jQuery UI的开销，我最近用.animate()写了一个递归解决方案。您可以根据需要自定义延迟和颜色。

function doBlink(id, count) { 
    $(id).animate({ backgroundColor: "#fee3ea" }, { 
     duration: 100, 
     complete: function() { 

      // reset 
      $(id).delay(100).animate({ backgroundColor: "#ffffff" }, { 
       duration: 100, 
       complete: function() { 

        // maybe call next round 
        if(count > 1) { 
         doBlink(id, --count); 
        } 
       } 
      }); 

     } 
    }); 
} 

当然，你需要的颜色插件来获得backgroundColor与.animate()工作。 https://github.com/jquery/jquery-color

并提供一点上下文，这是我如何调用它。我需要将页面滚动到目标div，然后眨眼。

$(window).load(function(){ 
    $('html,body').animate({ 
     scrollTop: $(scrollToId).offset().top - 50 
    }, { 
     duration: 400, 
     complete: function() { doBlink(scrollToId, 5); } 
    }); 
}); 

Answer 6

我想你可以用我给出的类似答案。你可以在这里找到它... https://stackoverflow.com/a/19083993/2063096

• 应该适用于所有浏览器，因为它只有Javascript和jQuery。

注意：此解决方案不使用jQuery UI，因此您也可以在您的代码中实现它之前玩弄自己喜欢的小提琴。

Answer 7

这是一个自定义的眨眼效果我创建的，它采用setInterval和fadeTo

HTML -

<div id="box">Box</div> 

JS -

setInterval(function(){blink()}, 1000); 


    function blink() { 
     $("#box").fadeTo(100, 0.1).fadeTo(200, 1.0); 
    } 

至于因为它得到简单。

http://jsfiddle.net/Ajey/25Wfn/

Answer 8

我用不同的预定义的颜色，像这样：

theme = { 
    whateverFlashColor: '#ffffaa', 
    whateverElseFlashColor: '#bbffaa', 
    whateverElseThenFlashColor: '#ffffff', 
}; 

，并利用它们这样

$('#element').effect("highlight", {color:theme.whateverFlashColor}, 1000); 

容易:)

Answer 9

只是给elem.fadeOut（10 ）.fadeIn（10）;

Answer 10

如果您还没有使用jQuery UI库，你想模仿你能做什么效果是很简单的

$('#blinkElement').fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100); 

你也可以玩的数字来获得更快或更慢的一个更好地适应您的设计。

这也可以是一个全局jQuery的功能，所以你可以在整个网站使用相同的效果。还要注意，如果你把这段代码放在for循环中，你可以有1百万个脉冲，所以你不会被限制在默认值6或者默认值是多少。

Answer 11

尝试用jquery.blink.js插件：

https://github.com/webarthur/jquery-blink

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<script src="/path/to/jquery.blink.js"></script> 

<script> 
jQuery('span').blink({color:'white'}, {color:'black'}, 50); 
</script> 

#enjoy！

Answer 12

<script> 
$(document).ready(function(){ 
    var count = 0; 
    do { 
     $('#toFlash').fadeOut(500).fadeIn(500); 
     count++; 
    } while(count < 10);/*set how many time you want it to flash*/ 
}); 
</script 

Answer 13

检查出来 -

<input type="button" id="btnclick" value="click" /> 
var intervalA; 
     var intervalB; 

     $(document).ready(function() { 

      $('#btnclick').click(function() { 
       blinkFont(); 

       setTimeout(function() { 
        clearInterval(intervalA); 
        clearInterval(intervalB); 
       }, 5000); 
      }); 
     }); 

     function blinkFont() { 
      document.getElementById("blink").style.color = "red" 
      document.getElementById("blink").style.background = "black" 
      intervalA = setTimeout("blinkFont()", 500); 
     } 

     function setblinkFont() { 
      document.getElementById("blink").style.color = "black" 
      document.getElementById("blink").style.background = "red" 
      intervalB = setTimeout("blinkFont()", 500); 
     } 

    </script> 

    <div id="blink" class="live-chat"> 
     <span>This is blinking text and background</span> 
    </div> 

Answer 14

由于我没有看到，不需要额外的库任何基于jQuery的解决方案，这里是一个简单的比这些更灵活一点使用fadeIn/fadeOut。

$.fn.blink = function (count) { 
    var $this = $(this); 

    count = count - 1 || 0; 

    $this.animate({opacity: .25}, 100, function() { 
     $this.animate({opacity: 1}, 100, function() { 
      if (count > 0) { 
       $this.blink(count); 
      } 
     }); 
    }); 
}; 

使用方法如下

$('#element').blink(3); // 3 Times.