텍스트 깜박임 jQuery
jQuery에서 텍스트를 쉽게 깜박이게 하는 방법과 중지하는 방법은 무엇입니까?IE, FF 및 Chrome에서 작동해야 합니다.감사해요.
어떤 텍스트를 깜빡이는 플러그인은 제게 약간 오버킬처럼 들립니다...
해보세요...
$('.blink').each(function() {
var elem = $(this);
setInterval(function() {
if (elem.css('visibility') == 'hidden') {
elem.css('visibility', 'visible');
} else {
elem.css('visibility', 'hidden');
}
}, 500);
});
예를들면
$('.blink').blink(); // default is 500ms blink interval.
//$('.blink').blink(100); // causes a 100ms blink interval.
또한 매우 간단한 플러그인이므로 애니메이션을 중지하고 필요에 따라 시작하도록 확장할 수 있습니다.
애니메이션으로 깜박이는 것은 다음과 같습니다.
$(".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;
}
크롬에서 작동하는 것 같습니다. 약간 흐느끼는 소리가 들렸다고 생각했습니다.
위의 코드를 조합하면, 이것이 좋은 해결책이라고 생각합니다.
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.168.123/2y78%202782
다음은 내 것입니다. 중요한 세 가지 매개 변수를 제어할 수 있습니다.
- 속도의 저하
- 페이드 아웃 속도
- 반복 속도
.
setInterval(function() {
$('.blink').fadeIn(300).fadeOut(500);
}, 1000);
또한 표준 CSS 방식을 사용할 수 있습니다(JQuery 플러그인은 필요하지 않지만 모든 브라우저와 호환 가능).
// Start blinking
$(".myblink").css("text-decoration", "blink");
// Stop blinking
$(".myblink").css("text-decoration", "none");
이것이 가장 쉬운 방법입니다(최소한의 코딩으로).
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);
다음을 시도할 수도 있습니다.
<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>
$.fn.blink = function(times, duration) {
times = times || 2;
while (times--) {
this.fadeTo(duration, 0).fadeTo(duration, 1);
}
return this;
};
여기에서 빠른 데모와 함께 jQuery blink 플러그인을 찾을 수 있습니다.
기본 깜박임(무제한 깜박임, 깜박임 기간 ~ 1초):
$('selector').blink();
고급 사용의 경우 다음 설정을 재정의할 수 있습니다.
$('selector').blink({
maxBlinks: 60,
blinkPeriod: 1000, // in milliseconds
onBlink: function(){},
onMaxBlinks: function(){}
});
할 수 만 아니라 가지 수도 있습니다. 여 최 서 깜 대 콜 가 액 백 할 에 있 습 니 다 수 스 세 지 몇 며 기 있 으 수 할 정 지 박 수 를 임 ▁there 다 니 습 있 backsonBlink그리고.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>
출처:
크리스찬
<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>
저는 알렉스의 대답이 마음에 들어요, 그래서 이것은 간격이 없는 그것의 약간의 연장입니다. 왜냐하면 당신은 결국 그 간격을 지우고 언제 버튼이 깜박이는 것을 멈추기를 원하는지 알아야 하기 때문입니다.이 솔루션은 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를 사용해 보십시오(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();
}
});
실제로 간단한 깜박임 효과를 위한 플러그인은 과잉 살상입니다.그래서 다양한 솔루션을 실험한 후, 저는 자바스크립트의 한 줄과 요소를 깜박이는 방법을 정확하게 제어하는 CSS 클래스 중 하나를 선택했습니다(나의 경우 깜박임이 작동하려면 배경만 투명하게 변경하면 텍스트를 계속 볼 수 있습니다).
JS:
$(document).ready(function () {
setInterval(function () { $(".blink").toggleClass("no-bg"); }, 1000);
});
CSS:
span.no-bg {
background-color: transparent;
}
깜박임 기능은 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 요청을 추가하기 전에 순수 자바스크립트가 있는 것을 선택했을 것입니다.
$(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>
언급URL : https://stackoverflow.com/questions/1605698/text-blinking-jquery
'programing' 카테고리의 다른 글
| python의 mockpatch.object를 사용하여 다른 메서드 내에서 호출된 메서드의 반환 값 변경 (0) | 2023.08.28 |
|---|---|
| MariaDB Encryption의 가장 좋은 방법은 무엇입니까? (0) | 2023.08.28 |
| Spring MVC 애플리케이션에서 서비스 계층에 사용하는 명명 규칙은 무엇입니까? (0) | 2023.08.28 |
| 실행문 중 PDO가 영향을 받는 행이었습니다. (0) | 2023.08.28 |
| c99와 c11의 차이 (0) | 2023.08.28 |