Blinking text cross browser

后端未结

关注

 11  2344

刺人心

I want to make a blinking text.

First I tried the HTML tag, but it is only supported in Mozilla Firefox.

Then I tried CSS:

相关标签:

11条回答

眼角桃花

2020-12-05 01:35

It is working smoothly in all the browsers...Please try it it will work

<script type="text/javascript">
    function blinker()
    {
        if(document.getElementById("blink"))
        {
            var d = document.getElementById("blink") ;
            d.style.color= (d.style.color=='red'?'white':'red');
            setTimeout('blinker()', 500);
        }
    }
</script>

<body onload="blinker();">
    <div id="blink">Blinking Text</div>
</body>

0 讨论(0)

南旧

2020-12-05 01:36

<p id="blink">My name is Ankurji1989</p>


<script type="text/javascript">

var blink_line = document.getElementById("blink");

function d_block(){

    if(blink_line.style.visibility=='hidden')
    {
        blink_line.style.visibility='visible';
    }
    else{
        blink_line.style.visibility='hidden';
    }

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

</script>

0 讨论(0)

遥遥无期

2020-12-05 01:38

This can be achieved with CSS3 like so

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

It even has a nice fade effect. Works fine in Safari, but Chrome cries a little on the inside.

0 讨论(0)

野的像风

2020-12-05 01:38
Try this jQuery
```
function blinks(hide) {
    if (hide === 1) {
        $('.blink').show();
        hide = 0;
    }
    else {
        $('.blink').hide();
        hide = 1;
    }
    setTimeout("blinks("+hide+")", 400);
}

$(document).ready(function(){
    blinks(1);
});
```
Note : include the jquery file and give a class name 'blink' on element which you want to blink.

Tip: .show() and .hide() doesn't not reserve the width and height of the element... If you need to hide the element, but not his place (dimentions) at the document, use .css("visibility", "hidden or visible") instead.
0 讨论(0)
发布评论:

提交评论
- 加载中...

礼貌的吻别

2020-12-05 01:40

Simple jquery implementation, feel free to extend to fit your needs http://jsfiddle.net/L69yj/

var element = $(".blink");
var shown = true;
setInterval(toggle, 500);

function toggle() {
    if(shown) {
        element.hide();
        shown = false;
    } else {
        element.show();
        shown = true;
    }
}

0 讨论(0)

上一页 1 2