Текст мигает JQuery - PullRequest
Новая
       94

Текст мигает JQuery

97 голосов
/ 22 октября 2009

Какой простой способ заставить текст мигать в jQuery и способ остановить его? Должно работать на IE, FF и Chrome. Спасибо

Ответы [ 33 ]

3 голосов
/ 28 мая 2015

этот код работает для меня 

   $(document).ready(function () {
        setInterval(function(){
            $(".blink").fadeOut(function () {
                $(this).fadeIn();
            });
        } ,100)
    });
3 голосов
/ 22 ноября 2010

Здесь вы можете найти плагин jQuery blink с его быстрой демонстрацией .

Базовое мигание ( неограниченное мигание, период мигания ~ 1 сек ): 

$('selector').blink();

При более сложном использовании вы можете переопределить любую из настроек: 

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

Там вы можете указать максимальное количество миганий, а также получить доступ к нескольким обратным вызовам: onBlink и onMaxBlinks, которые говорят сами за себя.

Работает в IE 7 & 8, Chrome, Firefox, Safari и, вероятно, в IE 6 и Opera (хотя еще не тестировал их).

(В полном раскрытии: я являюсь создателем этого предыдущего. У нас была законная необходимость использовать его на работе [ * Я знаю, что нам всем нравится говорить это: -) ] для тревога внутри системы, и я подумал о том, чтобы поделиться только для использования по законной необходимости ;-)).

Вот еще один список jQuery blink плагинов .

2 голосов
/ 28 марта 2012

Вы можете попробовать эффект jQuery UI Pulsate:

http://docs.jquery.com/UI/Effects/Pulsate

1 голос
/ 28 ноября 2013

Я собирался опубликовать steps -типированный полифилл, но потом я вспомнил, что я действительно не хочу видеть этот эффект, поэтому… 

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

    setInterval(function() {
        visible = !visible;
        element.style.visibility = visible ? "visible" : "hidden";
    }, interval || 1000);
}
1 голос
/ 21 января 2010 
$(".myblink").css("text-decoration", "blink");

не работают с IE 7 и Safari. Хорошо работает с Firefox

1 голос
/ 05 июля 2013

Это автономное решение будет мигать текст указанное количество раз, а затем остановится.

Мигание использует непрозрачность, а не отображение / скрытие, затухание или переключение, так что DIV остается активируемым, если это когда-либо возникает (позволяет создавать кнопки с мигающим текстом).

jsFiddle здесь (содержит дополнительные комментарии) 

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {

                var init = 0;

                $('#clignotant').click(function() {
                    if (init==0) {
                        init++;
                        blink(this, 800, 4);
                    }else{
                        alert('Not document.load, so process the click event');
                    }
                });

                function blink(selector, blink_speed, iterations, counter){
                    counter = counter | 0;
                    $(selector).animate({opacity:0}, 50, "linear", function(){
                        $(this).delay(blink_speed);
                        $(this).animate({opacity:1}, 50, function(){

                            counter++;

                            if (iterations == -1) {
                                blink(this, blink_speed, iterations, counter);
                            }else if (counter >= iterations) {
                                return false;
                            }else{
                                blink(this, blink_speed, iterations, counter);
                            }
                        });
                        $(this).delay(blink_speed);
                    });
                }

                //This line must come *AFTER* the $('#clignotant').click() function !!
                window.load($('#clignotant').trigger('click'));


            }); //END $(document).ready()

        </script>
    </head>
<body>

    <div id="clignotant" style="background-color:#FF6666;width:500px;
    height:100px;text-align:center;">
        <br>
        Usage: blink(selector, blink_speed, iterations) <br />
        <span style="font-weight:bold;color:blue;">if iterations == -1 blink forever</span><br />
        Note: fn call intentionally missing 4th param
    </div>


</body>
</html>

Источники:
Дэнни Гименес
Моисей Кристиан

1 голос
/ 17 апреля 2013

Я чувствую, что следующее более понятно и индивидуально, чем другие ответы. 

    var element_to_blink=$('#id_of_element_to_blink');
    var min_opacity=0.2;
    var max_opacity=1.0;
    var blink_duration=2000;
    var blink_quantity=10;
    var current_blink_number=0;

    while(current_blink_number<blink_quantity){
        element_to_blink.animate({opacity:min_opacity},(blink_duration/2),"linear");
        element_to_blink.animate({opacity:max_opacity},(blink_duration/2),"linear");
        current_blink_number+=1;
        }
1 голос
/ 11 января 2012

Ссылка на автора 

<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>
0 голосов
/ 26 марта 2014

Действительно, плагин для простого эффекта мерцания является излишним. Поэтому после экспериментов с различными решениями я выбрал одну строку javascript и класс CSS, который точно контролирует, как я хочу мигать элементами (в моем случае, чтобы мигание работало, мне нужно всего лишь изменить фон на прозрачный, чтобы текст все еще виден):

JS: 

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

CSS: 

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

Полный пример на этой js fiddle .

0 голосов
/ 05 ноября 2013

Видя количество просмотров по этому вопросу и отсутствие ответов, которые охватывают как мигание, так и остановку, вот что: попробуйте jQuery.blinker out ( 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();
    }
});
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...