div에 jQuery "깜박이는 하이라이트"효과?


88

다음을 수행하는 방법을 찾고 있습니다.

<div>페이지 에 a 를 추가 하면 ajax 콜백이 일부 값을 반환합니다. 는 <div>AJAX 호출의 값으로 충전하고,이 <div>후 다른 앞에 추가 <div>테이블 열로서 작용한다.

사용자의 관심을 끌고 페이지에 새로운 것이 있음을 보여주고 싶습니다. 표시 / 숨기기가 아닌 깜박이
기를 원 <div>하지만 잠시 동안 강조 표시 / 강조 표시 해제하려면 5 초라고 말 하겠습니다 .

나는 깜박임 플러그인을 살펴 보았지만 내가 볼 수있는 한 요소에 표시 / 숨기기 만합니다.

Btw, 솔루션은 크로스 브라우저 여야하며, 네, 불행히도 IE가 포함되어 있습니다. IE에서 작동하도록하려면 약간 해킹해야하지만 전반적으로 작동해야합니다.


4
하지 마십시오. 필요한 경우 강조 효과 ( docs.jquery.com/UI/Effects/Highlight )로 강조 표시 하되 깜박이게 만들지 마십시오.
tvanfosson 2011 년

1
@tv 짧은 2 ~ 3 번의 "깜박임"( "깜박임"은 애니메이션 테두리 광선 또는 이와 유사한 것과 같은 미묘한 것임)은 괜찮고 짜증나 지 않지만 확실히 오랜 기간 동안 구식으로 깜박입니다. 시간이 나쁠 것입니다.
Pointy 2011 년

1
헤헤, 깜박임이 짜증나는 건 알지만 실제로 여기에는 목적이 있습니다. 사용자는 하루 종일 모니터 옆에 앉아있을 것으로 예상되지 않으므로 거리에서 무언가 변경되었는지 확인해야합니다
ZolaKt 2011 년

25
너희들은 웃기다. 웹 페이지는 여러분이 옳다고 생각하는 용도로만 사용됩니까? 저는 강조하고 싶지 않습니다. 대형 TV에서 볼 프로세스 모니터 페이지를 작성 중이기 때문에 깜박임이 필요합니다. 빨간색으로 깜박이고 계속해야 사람들의 시선을 끌 수 있습니다.
Bmo

답변:


173

jQuery UI 하이라이트 효과 는 당신이 찾고있는 것입니다.

$("div").click(function () {
      $(this).effect("highlight", {}, 3000);
});

문서 및 데모는 여기 에서 찾을 수 있습니다.


편집 :
아마도 jQuery UI Pulsate 효과 가 더 적절할 수 있습니다. 여기를 참조 하십시오.


편집 # 2 :
불투명도를 조정하려면 다음을 수행하십시오.

$("div").click(function() {
  // do fading 3 times
  for(i=0;i<3;i++) {
    $(this).fadeTo('slow', 0.5).fadeTo('slow', 1.0);
  }
});

... 불투명도가 50 % 이하로 떨어지지 않습니다.


1
Pulsate는 제가 찾고있는 것입니다. 감사합니다. 어쨌든 완전히 사라지는 것을 막을 수 있습니까? 페이드 만하면 불투명도가 50 %라고 말할 수 있습니까? 하이라이트 효과를 몇 번 연결하는 것일까 요?
ZolaKt 2011 년


30

이것은 내가 만든 사용자 지정 깜박임 효과 인 사용 setIntervalfadeTo

HTML-

<div id="box">Box</div>

JS-

setInterval(function(){blink()}, 1000);


    function blink() {
        $("#box").fadeTo(100, 0.1).fadeTo(200, 1.0);
    }

아주 간단합니다.

http://jsfiddle.net/Ajey/25Wfn/


1
잘 작동합니다! 그리고 JQuery UI가 필요하지 않습니다.
Pavel Vlasov

훌륭한 솔루션! Jquery를 사용하여 문제없이 작동합니다. 감사합니다
디지털 사이트

여기에 최고의 솔루션입니다!
DmitryBoyko

여기에 최고의 솔루션!
w3spi

19

Jquery UI 라이브러리를 아직 사용하지 않고 효과를 모방하려는 경우 수행 할 수있는 작업은 매우 간단합니다.

$('#blinkElement').fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100);

디자인에 더 잘 맞도록 더 빠르거나 더 느린 숫자를 얻기 위해 숫자를 가지고 놀 수도 있습니다.

이것은 또한 전역 jquery 함수가 될 수 있으므로 사이트 전체에서 동일한 효과를 사용할 수 있습니다. 또한이 코드를 for 루프에 넣으면 1 백만 펄스를 가질 수 있으므로 기본값 6 또는 기본값으로 제한되지 않습니다.

편집 : 이것을 전역 jQuery 함수로 추가

$.fn.Blink = function (interval = 100, iterate = 1) {
    for (i = 1; i <= iterate; i++)
        $(this).fadeOut(interval).fadeIn(interval);
}

다음을 사용하여 사이트에서 모든 요소를 ​​쉽게 깜박입니다.

$('#myElement').Blink(); // Will Blink once

$('#myElement').Blink(500); // Will Blink once, but slowly

$('#myElement').Blink(100, 50); // Will Blink 50 times once

18

jQuery UI 전체를 포함하지 않으려는 경우 jQuery.pulse.js를 대신 사용할 수 있습니다 .

불투명도를 변경하는 반복 애니메이션을 사용하려면 다음과 같이하십시오.

$('#target').pulse({opacity: 0.8}, {duration : 100, pulses : 5});

가볍고 (1kb 미만) 모든 종류의 애니메이션을 반복 할 수 있습니다.


1
여전히 jQuery UI "효과"가 필요합니다.
Jerome Jaglale

1
@JeromeJaglale 불투명도 변경은 jQuery에서만 수행 할 수 있기 때문에 jQuery UI없이 사용합니다. jQuery UI 특정 애니메이션을 사용하지 않는 한 동일해야합니다.
lulalala 2013 년

1
좋은 지적. jQuery UI 효과가 필요한 첫 번째 데모 (텍스트가 빨간색으로 깜박임)에 오해를 받았습니다.
Jerome Jaglale 2013 년

메모입니다. jquery.color.js색상 항목 만 포함하면됩니다 .
Dave


6

여기에 추가 라이브러리가 필요하지 않은 jQuery 기반 솔루션이 보이지 않기 때문에 fadeIn / fadeOut을 사용하는 것보다 약간 더 유연한 간단한 솔루션입니다.

$.fn.blink = function (count) {
    var $this = $(this);

    count = count - 1 || 0;

    $this.animate({opacity: .25}, 100, function () {
        $this.animate({opacity: 1}, 100, function () {
            if (count > 0) {
                $this.blink(count);
            }
        });
    });
};

이렇게 사용하세요

$('#element').blink(3); // 3 Times.

1

다음과 같이 미리 정의 된 다른 색상을 사용합니다.

theme = {
    whateverFlashColor: '#ffffaa',
    whateverElseFlashColor: '#bbffaa',
    whateverElseThenFlashColor: '#ffffff',
};

이렇게 사용하세요

$('#element').effect("highlight", {color:theme.whateverFlashColor}, 1000);

쉽게 :)


0

jQuery UI의 오버 헤드를 원하지 않는 경우 최근에 .animate(). 필요에 따라 지연 및 색상을 사용자 지정할 수 있습니다.

function doBlink(id, count) {
    $(id).animate({ backgroundColor: "#fee3ea" }, {
        duration: 100, 
        complete: function() {

            // reset
            $(id).delay(100).animate({ backgroundColor: "#ffffff" }, {
                duration: 100,
                complete: function() {

                    // maybe call next round
                    if(count > 1) {
                        doBlink(id, --count);
                    }
                }
            });

        }
    });
}

물론 당신은 얻을 플러그인 색상해야합니다 backgroundColor에 대한 작업 .animate(). https://github.com/jquery/jquery-color

그리고 약간의 맥락을 제공하기 위해 이것이 내가 그것을 부르는 방법입니다. 페이지를 내 대상 div로 스크롤 한 다음 깜박 여야했습니다.

$(window).load(function(){
    $('html,body').animate({
        scrollTop: $(scrollToId).offset().top - 50
    }, {
        duration: 400,
        complete: function() { doBlink(scrollToId, 5); }
    });
});

0

내가 준 비슷한 대답을 사용할 수 있다고 생각합니다. 여기에서 찾을 수 있습니다 ... https://stackoverflow.com/a/19083993/2063096

  • Javascript 및 jQuery 만 있으므로 모든 브라우저에서 작동해야합니다.

참고 :이 솔루션은 jQuery UI를 사용하지 않습니다. 바이올린도 있으므로 코드에서 구현하기 전에 원하는대로 놀 수 있습니다.


0

elem.fadeOut (10) .fadeIn (10);


FadeOut / FadeIn은 내가 찾던 요소가 아닌 요소를 결국 숨기거나 표시합니다. 나는 요소 숨기지 않고 / 감소 색상의 투명도를 높이기 위해 필요
ZolaKt

아니요, elem.show (). hide ()는 그렇게합니다. FadeOut / FadeIn은 불투명도를 변경합니다. 원하는 효과를 얻기 위해 fadeOut / fadeIn의 지속 시간을 조정할 수 있습니다. 하지만 한 번 elem을 숨 깁니다.
ibsenv


0
<script>
$(document).ready(function(){
    var count = 0;
    do {
        $('#toFlash').fadeOut(500).fadeIn(500);
        count++;
    } while(count < 10);/*set how many time you want it to flash*/
});
</script

0

그것을 확인하십시오 -

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

0

나는 내가 찾던 것을 정확히 찾을 수 없어서 내가 만들 수있는만큼 기본적인 것을 썼다. 강조 표시된 클래스는 배경색 일 수 있습니다.

var blinking = false; // global scope

function start_blinking() {
    blinking = true;
    blink();
}

function stop_blinking() {
    blinking = false;
}

function blink(x=0) {
    $("#element").removeClass("highlighted"); // default to not highlighted to account for the extra iteration after stopping

    if (blinking) {
        if (x%2 == 0) $("#element").addClass("highlighted"); // highlight on even numbers of x
        setTimeout(function(){blink(++x)},500); // increment x and recurse
    }
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.