[javascript] 텍스트 깜박임 jQuery

jQuery에서 텍스트 깜박임을 만드는 쉬운 방법과 중지하는 방법은 무엇입니까? IE, FF 및 Chrome에서 작동해야합니다. 감사



답변

이 깜박임 플러그인을 사용해보십시오

예를 들어

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

또한 매우 간단한 플러그인이며 애니메이션을 중지하고 요청시 시작할 수 있도록 확장 할 수 있습니다.


답변

일부 텍스트를 깜박이는 플러그인은 나에게 과잉처럼 들립니다 …

이 시도…

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


답변

여기에 애니메이션이 깜박입니다.

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

깜박이고 싶은 것이 무엇이든 깜박임 클래스를 제공하십시오.

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

#jquery의 DannyZB에 대한 모든 안부

풍모:

  • 플러그인이 필요하지 않습니다 (그러나 JQuery 자체)
  • 일을한다

답변

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에서 작동하는 것 같지만 약간의 흐느끼는 소리가 들린다 고 생각했습니다.


답변

위의 코드를 결합하면 이것이 좋은 해결책이라고 생각합니다.

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


답변

여기 내 것이 있습니다. 중요한 3 가지 매개 변수를 제어 할 수 있습니다.

  • 페이드 인 스피드
  • 페이드 아웃 속도
  • 반복 속도

.

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


답변

표준 CSS 방식을 사용할 수도 있습니다 (JQuery 플러그인이 필요하지 않지만 모든 브라우저와 호환 가능).

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

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

W3C 링크