如何使用JQuery或CSS在IE,chrome等浏览器上闪烁文本按钮

Question

在IE, chrome, safari中使用css或JQuery来闪烁文本按钮

    $('.blink').css('text-decoration','blink'); 

只能在Firefox中工作，不能在IE中工作。

这里我想闪烁button的值，而不是整个按钮。

我使用

    <input id="button12" type="button"  class ="button-click" value="X"> 

这里我想眨眼按钮值'X'和按钮将保持不变的眨眼值，即按钮将不眨眼

Answer 1

正如其他人所说，这通常不是一件好事，但这里有一个示例代码:

请注意，你必须使用一个固定大小的按钮，以便使用这个:

blink_state = 0;
$(function(){
    window.setInterval(blink,500);
});
function blink(){
    if(blink_state==0){
        $(".blink").text("blinking");
        blink_state=1;
    }
    else{
        $(".blink").text("");
        blink_state=0;
    }
}

http://jsfiddle.net/vseCx/1/

Answer 2

只是为了好玩，这里有一个动画:

setInterval(blink, 710);
function blink() {
    var elm = $("#button12"),
    mycolor = elm.css('color');
    mycolor == 'rgb(0, 0, 0)' ? mycolor='transparent' : mycolor='rgb(0, 0, 0)';
    elm.animate({color: mycolor},300);
}

用小提琴!

__

和一个不动画:

setInterval(blink, 500);
function blink() {
    var elm = $("#button12"),
    myval = elm.val();
    myval == "" ? myval="X" : myval="";
    elm.val(myval);
}

还用小提琴!

Answer 3

真的不知道你为什么要用这个但是....

var timer;
jQuery(function($) {
timer = setTimeout(blnk, 0);
});

function blnk() {
$(".blink").css({opacity: 0}).
    animate({opacity: 1}, 300, "linear").
    animate({opacity: 0}, 300, "linear", 
    function() {
        timer = setTimeout(blnk, 0);
    });
}

现场演示

对于按钮.....

现场演示

Answer 4

http://jsfiddle.net/v3yfr/

$("button").each(function() {
    var $this = $(this), uset = false, html = $this.html();
    setInterval(function() {
        if ( uset ) {
            $this.html(html);
        } else {
            $this.html("<u>" + html + "</u>");
        }
        uset = !uset;
    }, 150);
});

或:http://jsfiddle.net/v3yfr/2/

$("button").each(function() {
    var $this = $(this);
    setInterval(function() {
            $this.toggle();
    }, 150);
});

FOR INPUT: http://jsfiddle.net/v3yfr/6/

$("input[type=submit]").each(function() {
    var $this = $(this);
    setInterval(function() {
            $this.toggle();
    }, 150);
});

OR: http://jsfiddle.net/v3yfr/5/

$("input[type=submit]").each(function() {
    var $this = $(this), set = false;
    setInterval(function() {
        $this.css({
            "visibility": set ? "hidden" : "visible"
        });
        set = !set;
    }, 150);
});

处理内联文本

Answer 5

这样就可以了。只需添加一个算法来生成适当数量的填充空间，您就应该设置好了。

http://jsfiddle.net/ZnGNX/

HTML

<input type="button" id="btnTest" value="My Value" />

JavaScript

var $myBtn = $("#btnTest");
$myBtn.data("btn", {val: $myBtn.val()}); 
setInterval(function(){
    var defVal = $myBtn.data("btn").val; 
    if($myBtn.val() != defVal){
        $myBtn.val($myBtn.data("btn").val); 
    }else{
        $myBtn.val("             ");
    }
}, 1000); 

Answer 6

不幸的是，没有办法用CSS做到这一点，但用Javascript，这是一个肯定的!请看:本论坛帖子

Answer 7

<script type="text/javascript">
         var currentStyle = 'inline';
         function blinkSpan() {
             if (currentStyle == 'inline') {
                 currentStyle = 'none';
             } else {
                 currentStyle = 'inline';
             }
             document.getElementById('blink').style.display = currentStyle;
             setTimeout('blinkSpan()', 450);
         }
     </script>

和html中的

<button id ="b" >
   Photo<Span id="blink">n </span> </button>

Answer 8

这可能有帮助。

只需使用下面的java脚本，并在你的HTML标签中使用"blink"类。

<script type="text/JavaScript">
    function getElementsByClass(searchClass, domNode, tagName) {
        if (domNode == null) domNode = document;
        if (tagName == null) tagName = '*';
        var el = new Array();
        var tags = domNode.getElementsByTagName(tagName);
        var tcl = " " + searchClass + " ";
        for (i = 0, j = 0; i < tags.length; i++) {
            var test = " " + tags[i].className + " ";
            if (test.indexOf(tcl) != -1) el[j++] = tags[i];
        }
        return el;
    }
    function doIt() {
        var elms = getElementsByClass('blink');
        for (i = 0; i < elms.length; i++)
            elms[i].style.visibility = (elms[i].style.visibility == "hidden") ? "visible" : "hidden";
    }
    function Knipper() {
        setInterval('doIt()', 400);
    }
    window.onload = Knipper;
</script>

和HTML将如下所示:

<span class="blink">Note : </span>

(视图)来源:www.larshemel.com/forum/blinking_text_in_ie