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

Question

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

Answer 1

Мой путь: .fadein, .fadeout .fadein, .fadeout ......

$("#someElement").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);

Answer 2

Вы можете использовать плагин jQuery Color .

Например, чтобы привлечь внимание ко всем элементам div на вашей странице, вы можете использовать следующий код:

$("div").stop().css("background-color", "#FFFF9C")
    .animate({ backgroundColor: "#FFFFFF"}, 1500);

Редактировать - Новые и улучшенные

Следующее использует ту же технику, что и выше, но имеет дополнительные преимущества:

• параметризованный цвет подсветки и длительность
• сохранение исходного цвета фона вместо предположения, что он белый
• является расширением jQuery, поэтому вы можете использовать его на любом объекте

Расширение объекта jQuery:

var notLocked = true;
$.fn.animateHighlight = function(highlightColor, duration) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    var originalBg = this.css("backgroundColor");
    if (notLocked) {
        notLocked = false;
        this.stop().css("background-color", highlightBg)
            .animate({backgroundColor: originalBg}, animateMs);
        setTimeout( function() { notLocked = true; }, animateMs);
    }
};

Пример использования:

$("div").animateHighlight("#dd0000", 1000);

Answer 3

Вы можете использовать анимацию css3 для прошивки элемента

.flash {
  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;

  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;

  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;
}

@keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-webkit-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-moz-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-ms-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

А вам jQuery добавить класс

jQuery(selector).addClass("flash");

Answer 4

Через 5 лет ... (и дополнительный плагин не требуется)

Этот «пульсирует» его в нужный вам цвет (например, белый), помещая цвет фона div за ним, а затем затемняя объект и снова.

HTML объект (например, кнопка):

<div style="background: #fff;">
  <input type="submit" class="element" value="Whatever" />
</div>

jQuery (ваниль, других плагинов нет):

$('.element').fadeTo(100, 0.3, function() { $(this).fadeTo(500, 1.0); });

элемент - имя класса

первое число в fadeTo() - миллисекунды для перехода

второе число в fadeTo() - непрозрачность объекта после исчезновения / исчезновения

Вы можете проверить это в правом нижнем углу этой веб-страницы: https://single.majlovesreg.one/v1/

Редактировать (willsteel) без дублированного селектора с помощью $ (this) и откорректированных значений для точного выполнения флеш-памяти (как запрошено OP).

Answer 5

Вы можете использовать эффект подсветки в jQuery UI, чтобы добиться того же, я думаю.

Answer 6

Если вы используете jQueryUI, в UI/Effects

есть функция pulsate

$("div").click(function () {
      $(this).effect("pulsate", { times:3 }, 2000);
});

http://docs.jquery.com/UI/Effects/Pulsate

Answer 7

Вы можете использовать этот плагин (поместить его в файл js и использовать его через скрипт-тег)

http://plugins.jquery.com/project/color

А затем используйте что-то вроде этого:

jQuery.fn.flash = function( color, duration )
{

    var current = this.css( 'color' );

    this.animate( { color: 'rgb(' + color + ')' }, duration / 2 );
    this.animate( { color: current }, duration / 2 );

}

Это добавляет метод 'flash' ко всем объектам jQuery:

$( '#importantElement' ).flash( '255,0,0', 1000 );

Answer 8

$('#district').css({opacity: 0});
$('#district').animate({opacity: 1}, 700 );

Answer 9

Вы можете расширить метод Дешенга Ли, позволив счету итераций делать несколько вспышек, например:

// Extend jquery with flashing for elements
$.fn.flash = function(duration, iterations) {
    duration = duration || 1000; // Default to 1 second
    iterations = iterations || 1; // Default to 1 iteration
    var iterationDuration = Math.floor(duration / iterations);

    for (var i = 0; i < iterations; i++) {
        this.fadeOut(iterationDuration).fadeIn(iterationDuration);
    }
    return this;
}

Затем вы можете вызвать метод с указанием времени и количества вспышек:

$("#someElementId").flash(1000, 4); // Flash 4 times over a period of 1 second

Answer 10

Чистое решение jQuery.

(не требуется jquery-ui / animate / color.)

Если все, что вам нужно, это желтый "flash" эффект без загрузки цвета jquery:

var flash = function(elements) {
  var opacity = 100;
  var color = "255, 255, 20" // has to be in this format since we use rgba
  var interval = setInterval(function() {
    opacity -= 3;
    if (opacity <= 0) clearInterval(interval);
    $(elements).css({background: "rgba("+color+", "+opacity/100+")"});
  }, 30)
};

Приведенный выше скрипт просто выполняет 1-й переход в желтый цвет, что идеально подходит для того, чтобы сообщить пользователю, что элемент был обновлен или что-то подобное.

Использование:

flash($('#your-element'))