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

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

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

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

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

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

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 % 이하로 떨어지지 않습니다.

http://jqueryui.com/demos/effect/를 살펴보십시오 . 그것은 당신이 원하는 것을 정확히 수행 할 pulsate라는 효과가 있습니다.

$("#trigger").change(function() {$("#div_you_want_to_blink").effect("pulsate");});

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

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/

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

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

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

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

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

jQuery UI를 살펴볼 수 있습니다. 특히 하이라이트 효과 :

http://jqueryui.com/demos/effect/

여기에 추가 라이브러리가 필요하지 않은 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.

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

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

이렇게 사용하세요

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

쉽게 :)

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

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

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

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

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

jquery.blink.js 플러그인을 사용해보십시오.

https://github.com/webarthur/jquery-blink

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="/path/to/jquery.blink.js"></script>

<script>
jQuery('span').blink({color:'white'}, {color:'black'}, 50);
</script>

#즐겨!

<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

그것을 확인하십시오 -

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

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

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