как выделить отделение в течение нескольких секунд с помощью jQuery

Я хочу быть, добавляют следующие к страница:

Когда отделение нажато, я хочу:

  1. измените цвет фона отделения, на которое нажимают, в течение нескольких секунд
  2. вернитесь назад к исходному цвету фона после нескольких секунд

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

Я не уверен, как соединить все это все же. Кто-либо может обеспечить несколько строк, которые показывают, как сделать это?

Это - то, что я имею до сих пор:

$(function(){
 $('div.highlightable').click(function(){
    //change background color via CSS class
    $(this).addClass('highlighted);
    //set a timer to remove the highlighted class after N seconds .... how?
 });
});
11
задан morpheous 25 July 2010 в 09:12
поделиться

4 ответа

Один из способов - использовать setTimeout :

$(function () {
    $('div.highlightable').click(function () {
        $(this).addClass('highlighted');
        setTimeout(function () {
            $('div.highlightable').removeClass('highlighted');
        }, 2000);
    });
});
27
ответ дан 3 December 2019 в 01:02
поделиться

Вы можете использовать эффект выделения пользовательского интерфейса jQuery :

$(".myDiv").effect("highlight", {}, 3000);

Демонстрация в фрагментах стека:

 $ (function () {$ (". MyDiv"). Click (function () {$ (это) .effect ("выделить", {}, 3000);});}); 
 .myDiv {margin: 0px; ширина: 100 пикселей; высота: 80 пикселей; фон: # 666; граница: сплошной черный 1px; положение: относительное; } 
  < script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js">   
11
ответ дан 3 December 2019 в 01:02
поделиться

Вы можете использовать setTimeout функция:

$('div.highlightable').click(function(){
    var $this = $(this);
    //change background color via CSS class
    $this.addClass('highlighted');
    // set a timeout that will revert back class after 5 seconds:
    window.setTimeout(function() {
        $this.removeClass('highlighted');
    }, 5 * 1000);
});
4
ответ дан 3 December 2019 в 01:02
поделиться

Думаю, вы ищете эффект Highlight .

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

6
ответ дан 3 December 2019 в 01:02
поделиться
Другие вопросы по тегам:

Похожие вопросы: