텍스트 깜박임 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 링크

다음을 시도해 볼 수도 있습니다.

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

이것은 가장 쉬운 방법입니다 (그리고 최소한의 코딩으로) :

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

깡깡이

이제 좀 더 정교한 것을 찾고 있다면 ...

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

깡깡이

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

여기에서 빠른 데모 와 함께 jQuery 깜박임 플러그인을 찾을 수 있습니다 .

기본 깜박임 ( 무제한 깜박임, 깜박임 기간 ~ 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 깜박임 플러그인 의 또 다른 목록입니다 .

이 코드는 나를 위해 일합니다

   $(document).ready(function () {
        setInterval(function(){
            $(".blink").fadeOut(function () {
                $(this).fadeIn();
            });
        } ,100)
    });

jQuery UI Pulsate 효과를 시도 할 수 있습니다.

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

가장 쉬운 방법:

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

원하는만큼 반복하거나 루프 내에서 사용할 수 있습니다. fadeTo ()의 첫 번째 매개 변수는 페이드가 적용되는 기간이고 두 번째 매개 변수는 불투명도입니다.

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

IE 7 및 Safari에서는 작동하지 않습니다. Firefox와 잘 작동

이 독립 실행 형 솔루션은 지정된 횟수만큼 텍스트를 깜박 인 다음 중지합니다.

깜박임은 표시 / 숨기기, 페이드 또는 토글이 아닌 불투명도를 사용하여 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>

출처 :
Danny Gimenez
Moses Christian

작성자 링크

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

시간이 steps지정된 폴리 필 을 게시하려고 했지만이 효과를보고 싶지 않다는 것을 기억했습니다. 그래서 ...

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

    setInterval(function() {
        visible = !visible;
        element.style.visibility = visible ? "visible" : "hidden";
    }, interval || 1000);
}

나는 다음이 다른 답변보다 더 명확하고 맞춤화되었다고 생각합니다.

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

이 코드는 단순히 불투명도에 작용 하여 레이아웃을 건드리지 않고 (예 를 들어) 요소가 깜박이 도록 효과적으로 만듭니다 fadeIn().fadeOut(). 깜빡이는 텍스트입니다. 선과 악 모두에 사용할 수 있습니다 :)

setInterval(function() {
  $('.blink').animate({ opacity: 1 }, 400).animate({ opacity: 0 }, 600);
}, 800);

깜박임!

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

이 코드는이 주제에 도움이 될 수 있습니다. 간단하지만 유용합니다.

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

나는 alex의 대답을 좋아하므로 이것은 간격없이 약간의 확장입니다 (결국 그 간격을 지우고 버튼이 깜박임을 멈추기를 원하는시기를 알아야하기 때문입니다. 이것은 jquery 요소를 전달하는 솔루션입니다. , 깜박이는 오프셋에 대해 원하는 ms 및 요소를 깜박이게 할 횟수 :

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

이 답변 중 일부는 매우 복잡하지만 조금 더 쉽습니다.

$.fn.blink = function(time) {
    var time = typeof time == 'undefined' ? 200 : time;
    this.hide(0).delay(time).show(0);
}

$('#msg').blink();

이 질문에 대한 조회수와 깜박임과 중지를 모두 다루는 답변의 부족을 확인하면 다음과 같습니다. jQuery.blinker 를 사용해보십시오 ( 데모 ).

HTML :

<p>Hello there!</p>

자바 스크립트 :

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

사실 간단한 깜박임 효과를위한 플러그인은 과잉입니다. 따라서 다양한 솔루션을 실험 한 후 한 줄의 자바 스크립트와 요소를 깜박이는 방법을 정확히 제어하는 ​​CSS 클래스 중에서 선택했습니다 (내 경우 깜박임이 작동하려면 배경을 투명으로 변경하면됩니다. 텍스트는 여전히 표시됨) :

JS :

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

CSS :

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

이 js fiddle의 전체 예제 .

블링크 기능은 일반 자바 스크립트로 구현할 수 있으며 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);

그리고 작동하는 바이올린

이것이 저에게 가장 잘 맞는 결과입니다. 이것은 이미 jQuery를 연결하는 WordPress에 있기 때문에 jQuery fadeTo를 사용했습니다. 그렇지 않으면 플러그인에 대한 다른 http 요청을 추가하기 전에 순수한 JavaScript로 무언가를 선택했을 것입니다.

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

텍스트 깜박임 횟수를 지정하는 동안 텍스트 깜박임에 대한 간단한 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);

버튼 클릭시 텍스트 깜박임 시작 및 중지 -

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