Как заставить появиться и исчезнуть div цвет фона в jquery?

Question

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

До сих пор мои знания jquery сводились к следующему коду:

         $("div.first_div").click(function(){
              $("#second_div_ID").fadeIn(30).css("background-color", 'blue')
              .fadeOut(1000).css("background-color", 'blue');
          });   });

но происходит то, что весь второй div исчезает вместе с содержимым, которое не ожидается. Любая помощь будет оценена! Спасибо!

Answer 1

Вы приковали свои fadein() и fadeout():

$("#second_div_ID").fadeIn(30).css("background-color", 'blue').fadeOut(1000).css("background-color", 'blue'); 

так что они могут быть вызваны синхронно.

Возможно, вы также ищете animate():

Чтобы убедиться, что один вызван, когда другой закончил. попробуйте это:

var $second_div = $("#second_div_ID");
var oldBGColour = $second_div.css('background-color');

$second_div.animate({'background-color': 'blue'}, 30, function(){
    $(this).animate({background-color: oldBGColour}, 1000);
})

Не проверено, но вы захотите что-то вроде выше

Answer 2

<div class="quick-alert">Alert! Watch me before it's too late!</div>

.quick-alert {
   width: 50%;
   margin: 1em 0;
   padding: .5em;
   background: #ffa;
   border: 1px solid #a00;
   color: #a00;
   font-weight: bold;
   display: none;
 }

$(document).ready(function() {
  $('#show-alert').click(function() {
    $('<div class="quick-alert">Alert! Watch me before it\'s too late!</div>')
    .insertAfter( $(this) )
    .fadeIn('slow')
    .animate({opacity: 1.0}, 3000)
    .fadeOut('slow', function() {
      $(this).remove();
    });
  });
});

DIV - это экранный объект, когда вы нажимаете на кнопку (по ID # show-alert), это сообщение появляется, и через 3 секунды автоматически исчезает.Его css также прилагается,

Надеюсь, полезно,

Приветствия!

Answer 3

Когда вы используете fadeIn и fadeOut, вы используете не только фон этого div, но и весь элемент, включая все подэлементы.

Поэтому вам нужно установить цвет фона на «синий», а затем в обратном направлении установить его на прозрачный. В промежутке между двумя вы можете установить небольшую задержку. Это можно сделать с помощью этого плагина: http://www.evanbot.com/article/jquery-delay-plugin/4

Возможно, вы также можете использовать этот плагин: http://plugins.jquery.com/project/color
Это дает jQuery возможность выполнять анимацию на цветах, и, возможно, это то, что вам нужно.