Как мигать текст на кнопке в IE, Chrome и т. Д. С помощью JQuery или CSS

Question

Чтобы мигать текст на кнопке в IE, Chrome, Safari, используя css или JQuery

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

будет работать в Firefox, а не в IE.

Здесь я хочу моргнутьзначение кнопки, а не кнопки целиком.

Я использую

    <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);
}

Также с FIDDLE!

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);
    });
}

LIVE DEMO

И для кнопки .....

LIVE DEMO

Answer 4

Что-то вроде этого должно сделать это.Просто добавьте алгоритм, чтобы сгенерировать необходимое количество пробелов, и все будет готово.

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 5

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);
});

ДЛЯ ВХОДА: http://jsfiddle.net/v3yfr/6/

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

ИЛИ: 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 6

К сожалению, нет способа сделать это с помощью CSS, но с Javascript это да! Взгляни на: Это сообщение на форуме

Answer 7

Это может быть полезно.

Просто используйте приведенный ниже 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

Answer 8

<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>