div에 대한 jQuery "눈 깜빡이는 하이라이트" 효과?

div에 대한 jQuery "눈 깜빡이는 하이라이트" 효과?

저는 다음과 같은 방법을 찾고 있습니다.

추가합니다<div>페이지로 이동하면 Ajax 콜백이 일부 값을 반환합니다.<div>. 그리고 Ajax 채워지고로호값으,<div>그런 다음 다른 이름 앞에 붙습니다.<div>테이블 열 역할을 합니다.

사용자의 주의를 끌어서 페이지에 새로운 내용이 있다는 것을 보여주고 싶습니다.
나는 그것을 원합니다.<div>깜박이는 것, 표시/숨기는 것이 아니라 한동안 강조 표시/표시 해제하는 것을 5초라고 합니다.

깜박이는 플러그인을 계속 보고 있지만, 제가 보기에는 요소만 표시/숨깁니다.

하지만, 솔루션은 크로스 브라우저여야 하며, 안타깝게도 IE가 포함되어 있습니다.아마도 IE에서 작동하기 위해서는 약간의 해킹이 필요하겠지만, 전반적으로 작동해야 합니다.

jQuery UI 하이라이트 효과를 찾고 있습니다.

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

설명서 및 데모는 여기에서 확인할 수 있습니다.

---

편집:
jQuery UIPulsate Effect가 더 적합할 수 있습니다. 여기를 참조하십시오.

---

편집 #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/ 을 보세요.그것은 정확히 여러분이 원하는 것을 할 수 있는 맥동이라는 효과가 있습니다.

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

가 만든로, 이은제만사정깜효의다과니입박임자것용든가▁i다▁this▁effect를 사용합니다. 사용자 정의 깜박임 효과는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 루프에 넣으면 100만 개의 펄스를 가질 수 있으므로 기본값 6 또는 기본값의 양으로 제한되지 않습니다.

EDIT: 글로벌 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 기반 솔루션은 보이지 않으므로 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.

당신은 jQuery UI를 조사하는 것이 좋을 것입니다.특히 하이라이트 효과는 다음과 같습니다.

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

다음과 같은 다양한 미리 정의된 색상을 사용합니다.

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

그리고 그것들을 이렇게 사용합니다.

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

쉬운 :)

그냥 em.fadeOut(10).fadeIn(10);

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

문맥을 좀 제공하기 위해 제가 이렇게 불렀습니다.저는 그 페이지를 제 목표 디비로 스크롤한 다음 깜박여야 했습니다.

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

제 생각에 당신은 제가 했던 것과 비슷한 답변을 사용할 수 있을 것 같습니다.여기서 찾을 수 있습니다...https://stackoverflow.com/a/19083993/2063096

• 자바스크립트와 jQuery만 가능하므로 모든 브라우저에서 작동해야 합니다.

참고: 이 솔루션은 jQuery UI를 사용하지 않으며, 코드에 구현하기 전에 원하는 대로 플레이할 수 있는 피들도 있습니다.

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

언급URL : https://stackoverflow.com/questions/5205445/jquery-blinking-highlight-effect-on-div