simple jQuery Fading Background Color

Home Image Effectssimple jQuery Fading Background Color

simple jQuery Fading Background Color

14 years ago Views

18241

1754

devsnippets

we would like to experience with you another effect that is widely used these days, the Background Color Fading effect on hover. We’ll have a block of content that when the mouse moves over the backgroundColor starts an animation where it changes to another. When the mouse is moved off, the animation to the starting backgroundColor is triggered.

To follow the tutorial you’ll need a copy of the latest version of jQuery UI; jQuery UI is the official library of widgets and utilities built on top of jQuery; it’s very easy to use and theme.

Instead of hosting the source code yourself, you could link directly to the most recent version hosted on the Google Ajax Libraries API. This will increase the performance of your website a lot. After including this on your page, we’ll get started by creating our simlple .animate() function.

<!-- include jQuery Library From Google Code -->
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

We will also need to include the jQuery UI

<!-- include jQuery UI  From Google Code-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

Another way to do this:

  google.load("jquery", "1.4.2");
  google.load("jqueryui", "1.8.0");

This is the first thing to learn about jQuery: If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.

      $(document).ready(function() {
          // put all your jQuery goodness in here.
      });

The fun part starts now with the .animate() function.

The effect that we want to create is slowly fading the background color into a different color on .hover(). It will act as some sort of transition until we get the final background color.

<body>
<div id="container">
 <h1>Background Color Animation With jQuery</h1>
  <h2>The Box Color Animates to a Different color On Hover Effect</h2>
 <div class="content">
  <div class="boxes">
    <div class="block">
    <h4>/ <a href="">Design</a> / <a href="">Photoshop</a></h4>
    <img src="09.jpg" alt="" />
                        </div>
                        <div class="info">
                                <h3><a href="http://devsnippets.com/article/designing-with-html5-css3.html">Designing for the Future with HTML5 CSS3</a>
                                </h3>
                       </div>
                       <p>Dolody lets you share your experiences and discover new design techniques with your friends.</p>
        </div><!-- END OF BOXES  -->
   </div>
  <p><a href="#" title="DAY 2: Fading Background Color With jQuery .animate()">Click here to return to the tutorial on DevSnippets</a></p>

</div>
</body>

Styling with CSS

Now that the slider structure is in place we’ll add some styles to hide the slidery. Overflow must be set to hidden to the block that carries the slider. This will ensure that the slider is kept hidden when the mouse is not hovered on the block carrying the slider until the position of the slider changes to fit.

body {
      background:#ccc;
      text-align:left;
      color:#333;
      width:800px;
      font-size:14px;
      font-family:georgia, 'time new romans', serif;
      margin:0 auto;
      padding:0;
}
a{
      color:#333;
      text-decoration:none
}
      a:focus {
      outline: none;
}

h1 {
      font-size: 34px;
      font-family: verdana, helvetica, arial, sans-serif;
      letter-spacing:-2px;
      color:#dff161;
      font-weight:700;
      padding:20px 0 0;
      text-shadow:0 1px 1px #333;
}

h2 {
      font-size: 24px;
      font-family: verdana, helvetica, arial, sans-serif;
      color:#333;
      font-weight: 400;
      padding: 0 0 10px;
      text-shadow:0 1px 1px #708819;
      }

h3, h3 a{
      font-size:14px;
      font-family:verdana, helvetica, arial, sans-serif;
      letter-spacing:-1px;
      color:#333;
      font-weight: 700;
      text-transform:uppercase;
      margin:0;
      padding:8px 0 8px 0;
}

p {
     color:#333;
     float:left;
     line-height:22px;
     margin:5px;
     padding:0 0 10px;
}

#container {
     margin: 0;
     padding: 0;
}

.boxes {
     background:#fff;
     border:1px solid #ccc;
     float:left;
     padding:10px;
     position:relative;
     width:510px;
}

img {
     border:5px solid #CCCCCC;
}

div.info {
     border-bottom:1px solid #CCCCCC;
     float:left;
     margin:0;
     padding:0;
     width:100%;
}

.block {
     color:#0066CC;
     float:left;
     overflow:hidden;
     position:relative;
     width:510px;
}

.block h4, .block h4 a{
     color:#333333;
     font-size:11px;
     padding:5px 0;
     text-shadow:0 1px 1px #DFF161;
     text-transform:uppercase;
     }

Animating with jQuery

The div element that has a class of ‘.boxes‘ is the block that we want to fade its color. The jquery code will be wrapped inside the <script></script> tag. Here it is:

<script type="text/javascript">
 $(document).ready(function(){
  $(".boxes").hover(function() {
                $(this).stop().animate({ backgroundColor: "#a7bf51"}, 800);
                },function() {
                $(this).stop().animate({ backgroundColor: "#ffffff" }, 800);
                });
  });
</script>

There is one action in the code above. When the mouse moves over the .boxes element, the backgroundColor starts an animation where it changes to #a7bf51 over 0.8 seconds. When the mouse is moved off the animation to the starting backgroundColor #ffffff is triggered.

Using the .stop() method before the animate() fixes the animation queue buildup where the animation will loop repeatedly by moving your mouse back and forth over the item.

Tag: hover effect