Posted By

cfleschhut on 03/23/10


Tagged

image jquery animation teaser


Versions (?)

jQuery Revealing Image Rollovers


 / Published in: jQuery
 

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

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

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: cfleschhut on March 23, 2010

inspired by http://www.mind2create.de/ (flash)

You need to login to post a comment.