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

Question

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

Answer 1

Еще одна сделанная из базовой функциональности jQuery (может быть и лучше):

function blink( el ) {
    if (!el) {
        el = this
    }

    $(el).animate( { opacity: 0.5 },1200, function() {
        $(this).animate( {opacity: 1 }, 1200, blink );
    } );
}

Вы можете настроить изменение непрозрачности анимации (0,5-1) и задержку (1200), чтобы лучше мигать. Этот менее раздражает, чем миг 90-х годов: -)

Answer 2

Функциональность Blink может быть реализована простым 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);

и рабочая скрипка

Answer 3

Самый простой способ:

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

Вы можете повторять это сколько угодно или использовать внутри цикла. первый параметр fadeTo () - это продолжительность, с которой эффект затухания вступает в силу, а второй параметр - непрозрачность.

Answer 4

Я написал простое расширение 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);

Answer 5

$.fn.blink = function (delay) {
  delay = delay || 500;
  return this.each(function () {
    var element = $(this);
    var interval = setInterval(function () {
      element.fadeOut((delay / 3), function() {
        element.fadeIn(delay / 3);
      })
    }, delay);
    element.data('blinkInterval', interval);
  });
};

$.fn.stopBlinking = function() {
  return this.each(function() {
    var element = $(this);
    element.stop(true, true);
    clearInterval(element.data('blinkInterval'));
  });
};

Answer 6

Это то, что оказалось лучшим для меня. Я использовал jQuery fadeTo, потому что это на WordPress, который уже связывает jQuery. В противном случае, я бы, вероятно, выбрал бы что-то с чистым JavaScript перед добавлением еще одного http-запроса для плагина.

$(document).ready(function() {
    // One "blink" takes 1.5s
    setInterval(function(){
        // Immediately fade to opacity: 0 in 0ms
        $(".cursor").fadeTo( 0, 0);
        // Wait .75sec then fade to opacity: 1 in 0ms
        setTimeout(function(){
            $(".cursor").fadeTo( 0, 1);
        }, 750);
    }, 1500);
});

Answer 7

Мне нравится ответ Алекса, так что это немного его расширение без интервала (поскольку вам, в конце концов, нужно будет удалить этот интервал и узнать, когда вы хотите, чтобы кнопка перестала мигать. Это решение, при котором вы передаете элемент jquery, количество мс, которое вы хотите для мигающего смещения, и количество раз, которое вы хотите, чтобы элемент мигал:

function blink ($element, ms, times) {
    for (var i = 0; i < times; i++) {
        window.setTimeout(function () {
            if ($element.is(':visible')) {
                $element.hide();
            } else {
                $element.show();
            }
        }, ms * (times + 1));
    }
}

Answer 8

Этот код может помочь в этой теме. Просто, но полезно.

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

Answer 9

мигает!

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

Answer 10

Текст Мигает запуск и остановка при нажатии кнопки -

<input type="button" id="btnclick" value="click" />
var intervalA;
        var intervalB;

        $(document).ready(function () {

            $('#btnclick').click(function () {
                blinkFont();

                setTimeout(function () {
                    clearInterval(intervalA);
                    clearInterval(intervalB);
                }, 5000);
            });
        });

        function blinkFont() {
            document.getElementById("blink").style.color = "red"
            document.getElementById("blink").style.background = "black"
            intervalA = setTimeout("blinkFont()", 500);
        }

        function setblinkFont() {
            document.getElementById("blink").style.color = "black"
            document.getElementById("blink").style.background = "red"
            intervalB = setTimeout("blinkFont()", 500);
        }

    </script>

    <div id="blink" class="live-chat">
        <span>This is blinking text and background</span>
    </div>