Posted By

merrittwjm on 04/07/11


Tagged

jquery button fade


Versions (?)

jQuery Button Fade


 / Published in: jQuery
 

  1. #background {
  2. background-image: url(background.jpg);
  3. background-position: center;
  4. background-repeat: no-repeat;
  5. min-height:422px;
  6. min-width:308px;
  7. height: inherit;
  8. }
  9.  
  10. .button {
  11. z-index: 100;
  12. }
  13.  
  14. img.dlon {
  15. position: fixed;
  16. z-index: 10;
  17. cursor:pointer;
  18. }
  19.  
  20. img.dloff {
  21. position: fixed;
  22. float: right;
  23. margin-top: 100px;
  24. }
  25.  
  26. //Button fade jquery
  27. $(document).ready(function(){
  28.  
  29. $("img.dlon").hover(
  30. function() {
  31. $(this).stop().animate({"opacity": "0"}, "fast");
  32. $("img.free").fadeIn().animate({"opacity": "0"}, "fast");
  33. },
  34. function() {
  35. $(this).stop().animate({"opacity": "1"}, "fast");
  36. $("img.free").stop().animate({"opacity": "1"}, "fast");
  37. });
  38.  
  39. });
  40.  
  41. <div id="background" >
  42.  
  43. <div id="background.button">
  44. <a id="clickableArea">
  45. <img width=340 height=72 border=0 alt="Download Toolbar!" src="button_on.jpg" class="dloff"></a>
  46. <a id="downloadNow" href="http://some_url">
  47. <img width=340 height=72 border=0 alt="Download Toolbar!" src="button_off.jpg" class="dlon"></a>
  48. </div>
  49.  
  50. </div>

Report this snippet  

You need to login to post a comment.