how to make appear and disappear div background color in jquery?

Question

Hi all,

I am trying make the background color of a div appear and then disappear like a flash coming and going but without nay success till now. On the click of a div, I am trying to give a flash effect to another div's background color.

So far, my jquery knowledge have come to the following code:

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

but what happens is the whole second div disappears along with the content which is not expected. Any help would be appreciated! Thanks!

Answer 1

You have chained your fadein() and fadeout():

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

so they are likely to be called syncronously.

You are also maybe looking for animate():

To ensure one is called when the other has finished. try this:

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);
})

Not tested, but you'll want something like the above

Answer 2

Hi

When you use fadeIn and fadeOut you don't just use out on that div's background but on the entire element including all sub elements.

Therefore you need to set the background-color to 'blue' and then aftwards set it to transparent. In between the two you might want to set in a little delay. This can be accomplished with this plugin: http://www.evanbot.com/article/jquery-delay-plugin/4

Maybe you can also use this plugin: http://plugins.jquery.com/project/color
It gives jQuery the ability to perform animations on colors and maybe this is what you need.

Answer 3

<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 is the display object, once you click on the button (by the ID #show-alert) this msg will appear, and after 3sec automatically disappear. Its css also attached,

Hope useful,

Cheers!