Как сделать элемент "flash" в jQuery?

Question

Я новичок в jQuery и имею некоторый опыт использования Prototype. В Prototype есть метод "прошить" элемент & mdash; то есть. кратко выделите его другим цветом и сделайте его ярким, чтобы пользователь обратил на него внимание. Есть ли такой метод в JQuery? Я вижу fadeIn, fadeOut и animate, но не вижу ничего похожего на «flash». Возможно, один из этих трех можно использовать с соответствующими входами?

Answer 1

Просто, так как лучше всего это сделать:

<script>

setInterval(function(){

    $(".flash-it").toggleClass("hide");

},700)
</script>

Answer 2

Вот решение, которое использует сочетание анимации jQuery и CSS3.

http://jsfiddle.net/padfv0u9/2/

По сути, вы начинаете с изменения цвета на свой «флеш», а затем используете анимацию CSS3, чтобы позволить цвету исчезнуть. Вам нужно изменить длительность перехода, чтобы начальная «вспышка» была быстрее затухания.

$(element).removeClass("transition-duration-medium");
$(element).addClass("transition-duration-instant");
$(element).addClass("ko-flash");
setTimeout(function () {
    $(element).removeClass("transition-duration-instant");
    $(element).addClass("transition-duration-medium");
    $(element).removeClass("ko-flash");
}, 500);

Где классы CSS следующие.

.ko-flash {
    background-color: yellow;
}
.transition-duration-instant {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}
.transition-duration-medium {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}

Answer 3

Работая с jQuery 1.10.2, это дважды вызывает выпадающий список и изменяет текст на ошибку. Он также сохраняет значения для измененных атрибутов, чтобы восстановить их.

// shows the user an error has occurred
$("#myDropdown").fadeOut(700, function(){
    var text = $(this).find("option:selected").text();
    var background = $(this).css( "background" );

    $(this).css('background', 'red');
    $(this).find("option:selected").text("Error Occurred");

        $(this).fadeIn(700, function(){
            $(this).fadeOut(700, function(){
                $(this).fadeIn(700, function(){
                    $(this).fadeOut(700, function(){

                        $(this).find("option:selected").text(text);
                        $(this).css("background", background);
                        $(this).fadeIn(700);
                    })
                })
            })
        })
});

Выполнено с помощью обратных вызовов - чтобы гарантировать, что анимация не пропущена.

Answer 4

Я использую этот. хотя еще не проверено на всех браузерах. просто измените это так, как вам нравится,

использование: hlight($("#mydiv"));

function hlight(elementid){
    var hlight= "#fe1414"; //set the hightlight color
    var aspeed= 2000; //set animation speed
    var orig= "#ffffff"; // set default background color
    elementid.stop().css("background-color", hlight).animate({backgroundColor: orig}, aspeed);
}

ПРИМЕЧАНИЕ: вам нужен пользовательский интерфейс jquery, добавленный в ваш заголовок.

Answer 5

Вы можете использовать эту классную библиотеку для создания любого анимированного эффекта на вашем элементе: http://daneden.github.io/animate.css/

Answer 6

Создайте два класса, назначив каждому цвет фона:

.flash{
 background: yellow;
}

.noflash{
 background: white;
}

Создать div с одним из следующих классов:

<div class="noflash"></div>

Следующая функция переключит классы и заставит их мигать:

var i = 0, howManyTimes = 7;
function flashingDiv() {
    $('.flash').toggleClass("noFlash")
    i++;
    if( i <= howManyTimes ){
        setTimeout( f, 200 );
    }
}
f();