Posted By

ryarwood on 01/30/12


Tagged

template client store travismathew


Versions (?)

Travis Mathew Store Starter


 / Published in: HTML
 

  1. <div style="margin-bottom: 15px;"><a href="#"><img src="/img/storepic910.jpg" width="715" height="346" /></a></div>
  2.  
  3. <div class="mediaItemLarge itemBorder">
  4. <div class="mediaItemLargeInner fadeClip" id="mediaSnipe1">
  5. <a href="/shop/cart.php?m=product_list&c=22">
  6. <img src="/img/storepic450-magestic.jpg" width="450" height="220" />
  7. <h2 class="itemTL itemLight fadeItem">Magestic Collection</h2>
  8. <h3 class="fadeSub">Shop the Magestic Collection in the TM Store</h3>
  9. </a>
  10. </div>
  11. </div>
  12.  
  13. <div class="mediaItemSmall">
  14. <div class="mediaItemSmallInner fadeClip" id="mediaSnipe2">
  15. <a href="/poloclub/">
  16. <img src="/img/storepic250-polo.jpg" width="250" height="220" />
  17. <h2 class="itemTL itemLight fadeItem">Polo Club</h2>
  18. <h3 class="fadeSub">Limited Edition Pieces By Mail</h3>
  19. </a>
  20. </div>
  21. </div>
  22.  
  23. <div class="mediaItemSmall itemBorder finalRow">
  24. <div class="mediaItemSmallInner fadeClip" id="mediaSnipe3">
  25. <a href="/shop/cart.php?m=product_list&c=22">
  26. <img src="/img/storepic250-belt2.jpg" width="250" height="220" />
  27. <h2 class="itemTL itemLight fadeItem">New Belts</h2>
  28. <h3 class="fadeSub">The Bruno and Matte</h3>
  29. </a>
  30. </div>
  31. </div>
  32.  
  33.  
  34. <div class="mediaItemLarge finalRow">
  35. <div class="mediaItemLargeInner fadeClip" id="mediaSnipe4">
  36. <a href="#">
  37. <img src="/img/storepic450-shoes.jpg" width="450" height="220" />
  38. <h2 class="itemTL itemLight fadeItem">Travis Mathew Shoes</h2>
  39. <h3 class="fadeSub">The Perfect Grip to Walk The Links</h3>
  40. </a>
  41. </div>
  42. </div>
  43.  
  44. <script type="text/javascript">
  45.  
  46. $(document).ready(function() {
  47.  
  48. $("#mediaSnipe1").hide()
  49. .delay(500)
  50. .fadeTo(750, 1, function() {
  51. $('#mediaSnipe1').find(".fadeItem").fadeTo(500, 1);
  52. });
  53.  
  54. $("#mediaSnipe2").hide()
  55. .delay(1000)
  56. .fadeTo(750, 1, function() {
  57. $('#mediaSnipe2').find(".fadeItem").fadeTo(500, 1);
  58. });
  59.  
  60. $("#mediaSnipe3").hide()
  61. .delay(1500)
  62. .fadeTo(750, 1, function() {
  63. $('#mediaSnipe3').find(".fadeItem").fadeTo(500, 1);
  64. });
  65.  
  66. $("#mediaSnipe4").hide()
  67. .delay(2000)
  68. .fadeTo(750, 1, function() {
  69. $('#mediaSnipe4').find(".fadeItem").fadeTo(500, 1);
  70. });
  71.  
  72. $('.fadeClip').mouseenter(function(e) {
  73. $(this).find("img").animate({ opacity: .25}, 250);
  74. $(this).find(".fadeItem").animate({ left: "13px" }, 250);
  75. $(this).find(".fadeSub").delay(250).fadeTo(250, 1);
  76. }).mouseleave(function(e) {
  77. $(this).find("img").animate({ opacity: 1}, 250);
  78. $(this).find(".fadeItem").animate({ left: "8px" }, 250);
  79. $(this).find(".fadeSub").fadeTo(100, 0);
  80. });
  81.  
  82. });
  83.  

Report this snippet  

You need to login to post a comment.