jQuery Revealing Image Rollovers


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



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.