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

Question

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

Answer 1

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

Попробуйте это ...

$('.blink').each(function() {
    var elem = $(this);
    setInterval(function() {
        if (elem.css('visibility') == 'hidden') {
            elem.css('visibility', 'visible');
        } else {
            elem.css('visibility', 'hidden');
        }    
    }, 500);
});

Answer 2

Попробуйте использовать этот плагин мигания

Например

$('.blink').blink(); // default is 500ms blink interval.
//$('.blink').blink(100); // causes a 100ms blink interval.

Это также очень простой плагин, и вы могли бы расширить его, чтобы остановить анимацию и запустить ее по требованию.

Answer 3

здесь мигает с анимацией:

$(".blink").animate({opacity:0},200,"linear",function(){
  $(this).animate({opacity:1},200);
});

просто дайте класс моргания тому, что вы хотите мигать:

<div class="someclass blink">some text</div>

все пожелания DannyZB на #jquery

Особенности:

• не требует никаких плагинов (но сам JQuery)
• делает вещь

Answer 4

Если вы не хотите использовать jQuery, этого можно достичь с помощью CSS3

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

Кажется, работает в Chrome, хотя мне показалось, что я услышал легкий рыдательный звук.

Answer 5

Объедините коды выше, я думаю, что это хорошее решение.

function blink(selector){
    $(selector).animate({opacity:0}, 50, "linear", function(){
        $(this).delay(800);
        $(this).animate({opacity:1}, 50, function(){
        blink(this);
        });
        $(this).delay(800);
    });
}

По крайней мере, это работает в моей сети. http://140.138.168.123/2y78%202782

Answer 6

Вот мой; он дает вам контроль над тремя важными параметрами:

• угасание скорости
• скорость затухания
• скорость повтора

.

setInterval(function() {
    $('.blink').fadeIn(300).fadeOut(500);
}, 1000);

Answer 7

Вы также можете использовать стандартный способ CSS (не требуется плагин JQuery, но совместим со всеми браузерами):

// Start blinking
$(".myblink").css("text-decoration", "blink");

// Stop blinking
$(".myblink").css("text-decoration", "none");

W3C Link

Answer 8

Это способ EASIEST (и с наименьшим количеством кода):

setInterval(function() {
    $( ".blink" ).fadeToggle();
}, 500);

Fiddle

Теперь, если вы ищете что-то более сложное ...

//Blink settings
var blink = {
    obj: $(".blink"),
    timeout: 15000,
    speed: 1000
};

//Start function
blink.fn = setInterval(function () {
    blink.obj.fadeToggle(blink.speed);
}, blink.speed + 1);

//Ends blinking, after 'blink.timeout' millisecons
setTimeout(function () {
    clearInterval(blink.fn);
    //Ensure that the element is always visible
    blink.obj.fadeIn(blink.speed);
    blink = null;
}, blink.timeout);

Fiddle

Answer 9

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

<div>some <span class="blink">text</span> are <span class="blink">blinking</span></div>
<button onclick="startBlink()">blink</button>
<button onclick="stopBlink()">no blink</button>

<script>
  function startBlink(){
    window.blinker = setInterval(function(){
        if(window.blink){
           $('.blink').css('color','blue');
           window.blink=false;
         }
        else{
            $('.blink').css('color','white');
            window.blink = true;
        }
    },500);
  }

  function stopBlink(){
    if(window.blinker) clearInterval(window.blinker);
  } 
</script>

Answer 10

$.fn.blink = function(times, duration) {
    times = times || 2;
    while (times--) {
        this.fadeTo(duration, 0).fadeTo(duration, 1);
    }
    return this;
};