javascript - style - js set css




文本闪烁jQuery (20)

在jQuery中使文本闪烁以及阻止它的一种简单方法是什么? 必须适用于IE,FF和Chrome。 谢谢


尝试使用这个blink插件

例如

$('.blink').blink(); // default is 500ms blink interval.
//$('.blink').blink(100); // causes a 100ms blink interval.

它也是一个非常简单的插件,你可以扩展它来停止动画并按需启动它。


awesome-gallery.blogspot.com/2011/03/…

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>

<div id="msg"> <strong><font color="red">Awesome Gallery By Anil Labs</font></strong></p> </div>

<script type="text/javascript" >
function blink(selector){
    $(selector).fadeOut('slow', function(){
        $(this).fadeIn('slow', function(){
            blink(this);
        });
    });
}

blink('#msg');
</script>

一个插件闪烁一些文字听起来有点像矫枉过正...

尝试这个...

$('.blink').each(function() {
    var elem = $(this);
    setInterval(function() {
        if (elem.css('visibility') == 'hidden') {
            elem.css('visibility', 'visible');
        } else {
            elem.css('visibility', 'hidden');
        }    
    }, 500);
});

事实上,一个简单的眨眼效果插件是矫枉过正的。 因此,在尝试了各种解决方案之后,我选择了一行javascript和一个CSS类,它们完全控制了我想要如何使元素闪烁(在我的情况下,闪烁起作用,我只需要将背景更改为透明,以便文字仍然可见):

JS:

$(document).ready(function () {
        setInterval(function () { $(".blink").toggleClass("no-bg"); }, 1000);
    });

CSS:

span.no-bg {
    background-color: transparent;
}

这个js小提琴的完整例子。


你也可以试试这些:

<div>some <span class="blink">text</span> are <span class="blink">blinking</span></div>
<button onclick="startBlink()">blink</button>
<button onclick="stopBlink()">no blink</button>

<script>
  function startBlink(){
    window.blinker = setInterval(function(){
        if(window.blink){
           $('.blink').css('color','blue');
           window.blink=false;
         }
        else{
            $('.blink').css('color','white');
            window.blink = true;
        }
    },500);
  }

  function stopBlink(){
    if(window.blinker) clearInterval(window.blinker);
  } 
</script>


在这里你可以找到一个jQuery blink插件及其快速demo

基本闪烁( 无限闪烁,闪烁周期〜1秒 ):

$('selector').blink();

在更高级的用法上,您可以覆盖任何设置:

$('selector').blink({
    maxBlinks: 60, 
    blinkPeriod: 1000,   // in milliseconds
    onBlink: function(){}, 
    onMaxBlinks: function(){}
});

在那里你可以指定最大闪烁次数,并且可以访问几个回调onBlinkonBlinkonMaxBlinks ,这些都很自我解释。

适用于IE 7和8,Chrome浏览器,Firefox,Safari以及IE 6和Opera(尽管未经测试)。

(完全披露:我是前一个创建者,我们有合理的需要在工作中使用它( 我知道我们都喜欢这样说:-) ]在系统中发出警报,我想共享用于合法需要;-))。

这里是另一个jQuery blink插件列表。


如果您不想使用jQuery,可以使用CSS3来实现

@-webkit-keyframes blink {  
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

blink {
  -webkit-animation-name: blink;  
  -webkit-animation-iteration-count: infinite;  
  -webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
  -webkit-animation-duration: 1s; 
}

似乎在Chrome中工作,但我想我听到了轻微的抽泣噪音。


我已经写了一个简单的jquery扩展文本闪烁,同时指定它应该闪烁文本的次数,希望它可以帮助其他人。

//add Blink function to jquery 
jQuery.fn.extend({
    Blink: function (i) {
        var c = i; if (i===-1 || c-- > 0) $(this).fadeTo("slow", 0.1, function () { $(this).fadeTo("slow", 1, function () { $(this).Blink(c);  }); });
    }
});
//Use it like this
$(".mytext").Blink(2); //Where 2 denotes number of time it should blink.
//For continuous blink use -1 
$(".mytext").Blink(-1);

我打算发布steps polyfill,但后来我记得我真的不希望看到这种效果,所以...

function blink(element, interval) {
    var visible = true;

    setInterval(function() {
        visible = !visible;
        element.style.visibility = visible ? "visible" : "hidden";
    }, interval || 1000);
}

最简单的方法:

$(".element").fadeTo(250, 0).fadeTo(250,1).fadeTo(250,0).fadeTo(250,1);

您可以根据需要重复此操作,也可以在循环中使用它。 fadeTo()的第一个参数是渐变生效的持续时间,第二个参数是不透明度。


此代码可能有助于此主题。 简单但有用。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        setInterval("$('#myID/.myClass').toggle();",500);
    });
</script>

看到这个问题的观点数量,以及缺乏闪烁和停止的答案,下面是:尝试jQuery.blinker出( demo )。

HTML:

<p>Hello there!</p>

JavaScript的:

var p = $("p");

p.blinker();

p.bind({
    // pause blinking on mouseenter
    mouseenter: function(){
        $(this).data("blinker").pause();
    },
    // resume blinking on mouseleave
    mouseleave: function(){
        $(this).data("blinker").blinkagain();
    }
});

眨眼功能可以通过普通的javascript实现,不需要jquery插件甚至jquery。

这可以在所有浏览器中使用 ,因为它使用的是基本功能

这是代码

HTML:

<p id="blinkThis">This will blink</p>

JS代码:

var ele = document.getElementById('blinkThis');
setInterval(function () {
    ele.style.display = (ele.style.display == 'block' ? 'none' : 'block');
}, 500);

和一个工作小提琴


这是我的; 它可以让你控制三个重要的参数:

  • 速度的淡入
  • 淡出速度
  • 重复的速度

setInterval(function() {
    $('.blink').fadeIn(300).fadeOut(500);
}, 1000);

这是最简单的方法(并且编码最少):

setInterval(function() {
    $( ".blink" ).fadeToggle();
}, 500);

Fiddle

现在,如果你正在寻找更复杂的东西......

//Blink settings
var blink = {
    obj: $(".blink"),
    timeout: 15000,
    speed: 1000
};

//Start function
blink.fn = setInterval(function () {
    blink.obj.fadeToggle(blink.speed);
}, blink.speed + 1);

//Ends blinking, after 'blink.timeout' millisecons
setTimeout(function () {
    clearInterval(blink.fn);
    //Ensure that the element is always visible
    blink.obj.fadeIn(blink.speed);
    blink = null;
}, blink.timeout);

Fiddle


这段代码将有效地使元素闪烁而不触及布局(如fadeIn().fadeOut()将会)通过对不透明度进行操作; 你走了,闪烁的文字; 可用于善与恶 :)

setInterval(function() {
  $('.blink').animate({ opacity: 1 }, 400).animate({ opacity: 0 }, 600);
}, 800);

这段代码适合我

   $(document).ready(function () {
        setInterval(function(){
            $(".blink").fadeOut(function () {
                $(this).fadeIn();
            });
        } ,100)
    });

闪烁!

var counter = 5; // Blinking the link 5 times
var $help = $('div.help');
var blinkHelp = function() {
    ($help.is(':visible') ? $help.fadeOut(250) : $help.fadeIn(250));    
    counter--;
    if (counter >= 0) setTimeout(blinkHelp, 500);
};
blinkHelp();

$(".myblink").css("text-decoration", "blink");

不适用于IE 7和Safari。 与Firefox工作良好





css