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

Я пытаюсь заставить цвет фона 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 исчезает вместе с неожидаемым содержимым. Любая помощь будет оценена по достоинству! Спасибо!


html jquery highlight show flash
person mandeep    schedule 18.02.2010    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вы связали свои 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);
})

Не проверено, но вам понадобится что-то вроде приведенного выше.

person James Wiseman    schedule 18.02.2010

arrow_upward
0
arrow_downward

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

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

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

person EmKay    schedule 18.02.2010

arrow_upward
0
arrow_downward 

<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 - это объект отображения, при нажатии на кнопку (по идентификатору #show-alert) появится это сообщение, а через 3 секунды автоматически исчезнет. Его css также прилагается,

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

Ваше здоровье!

person Community    schedule 19.06.2010