Anonymous 0

This must be too easy, but my google-fu needs replenishing and I've a deadline to meet.

using jQuery how would I change a background color from #BDE3A8 to transparent after a delay of 2 seconds with a slow fade transition?

basically it's to highlight a message added to the page and then remove the highlight background and leave the message in place.

I can find all the fadeout stuff, but it's not that, its a simple background color thing.

thanks for help

2 answers

Mottie 1134
0
points
This was chosen as the best answer

This is how I would do this highlighting.

Copy the entire quote, position it over the existing quote. Fade out the clone, then remove it. I posted a demo here.

NOTE this script requires jQuery v1.4 to work properly (it's using the new .delay() function)

<style type="text/css">
.highlight { background: #bde3a8; }
</style>

<div class="quote">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus, <span class="highlight">nibh ac ornare accumsan, nulla leo euismod ligula, et tincidunt ligula magna et arcu. Etiam lacinia lacinia nisi, nec venenatis massa varius non. Donec varius hendrerit augue quis porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed neque leo. Vivamus a nibh eu neque tempus tincidunt. Morbi porta cursus bibendum. Donec vitae velit diam, luctus porttitor justo. Morbi quis est lectus, ut aliquet orci.</span> Nulla facilisi. Cras a elit leo. Nam sit amet nisl eget eros luctus pretium. Fusce volutpat gravida adipiscing. Integer fermentum venenatis sapien sit amet aliquet. Integer quis dolor eros. Etiam at viverra neque. Donec tristique arcu quis erat convallis varius. 
</div>

<script type="text/javascript">
$(document).ready(function(){
 // copy quoted text and overlay it's clone
 var c = $('.quote').clone().addClass('tmpquote').css({ 'position':'absolute','top':0,'left':0 })
 $('.highlight').removeClass('highlight').addClass('highlighted');
 $('.quote').css('position','relative').append(c);
 // delay 2 sec then fade out highlight for 2 sec, then remove clone
 $('.tmpquote').delay(2000).fadeOut(2000, function(){
  $('.tmpquote').remove();
  $('.quote').css('position','');
 })
})
</script>
Answered almost 7 years ago by Mottie
  • That looks like a solution. Thanks. just need to check that every other plugin on the site will work with 1.4 Tony Crockford almost 7 years ago
0
points

Animating colors requires a plugin in JQuery 1.3 (not sure about 1.4).

I've found the Color Plugin to be useful. However, this does not allow you to animate to transparent. You will have to animate to specific color with this plugin.

Answered almost 7 years ago by Joel Potter
  • jQuery docs on the Color Plugin: http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations smaglio81 almost 7 years ago
  • that's a pain, it's on a textured background, so animate to a plain color not as exciting! Tony Crockford almost 7 years ago