Advanced Search

jQuery Revealing Image Rollovers

/ Published in: jQuery
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <ul>
  2.     <li>
  3.         <div>
  4.             <h3>18.03.2010 Headline</h3>
  5.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  6.             <p><a href="#">Artikel �¶ffnen</a></p>
  7.         </div>
  8.     </li>
  9. </ul>
  10.  
  11.  
  12. $("li").hover(function() {
  13.     $(this).find("div").animate({
  14.         bottom: 0,
  15.         backgroundColor: "lightgreen"
  16.     }, {
  17.         duration: 300,
  18.         easing: "easeOutCirc",
  19.         queue: false
  20.     });
  21. }, function() {
  22.     $(this).find("div").animate({
  23.         bottom: "-40px",
  24.         backgroundColor: "#999"
  25.     }, {
  26.         duration: 300,
  27.         easing: "easeOutCirc",
  28.         queue: false
  29.     });
  30. });

URL: http://jsfiddle.net/qXqSV/3/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.