Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on May 7th, 2012  |  syntax: None  |  size: 2.65 KB  |  hits: 22  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. IE8 not working correctly with .hover() and .animate() in jQuery. Chrome and FF are ok, typical
  2. <div id="nav_bar">
  3.     <img id="nav_block" src="images/main/nav_block.png" alt="" />
  4.     <a id="nav_home" class="nav_link" href="home.php">
  5.         <span id="nav_holder_home" class="nav_holder">Home</span>
  6.     </a>
  7.     <a id="nav_about" class="nav_link" href="home.php">
  8.         <span id="nav_holder_about" class="nav_holder">About</span>
  9.     </a>
  10.     <a id="nav_services" class="nav_link" href="home.php">
  11.         <span id="nav_holder_services" class="nav_holder">Services</span>
  12.     </a>
  13.     <a id="nav_gallery" class="nav_link" href="home.php">
  14.         <span id="nav_holder_gallery" class="nav_holder">Gallery</span>
  15.     </a>
  16.     <a id="nav_contact" class="nav_link" href="home.php">
  17.         <span id="nav_holder_contact" class="nav_holder">Contact</span>
  18.     </a>
  19. </div>
  20.        
  21. $(document).ready(function(){
  22.  
  23.     var current_pos = 0;
  24.     var hover_pos = 0;
  25.  
  26.     $('.nav_holder').hover(function() {
  27.         $("#nav_block").stop(true, false);
  28.         if ($(this).attr("id") == "nav_holder_home") {
  29.             hover_pos = 0;
  30.         } else if ($(this).attr("id") == "nav_holder_about") {
  31.             hover_pos = 1;
  32.         } else if ($(this).attr("id") == "nav_holder_services") {
  33.             hover_pos = 2;
  34.         } else if ($(this).attr("id") == "nav_holder_gallery") {
  35.             hover_pos = 3;
  36.         } else if ($(this).attr("id") == "nav_holder_contact") {
  37.             hover_pos = 4;
  38.         }
  39.         $("#nav_block").animate({
  40.             marginLeft: (hover_pos*98)
  41.         }, 200 );
  42.     }, function () {
  43.         $("#nav_block").animate({
  44.             marginLeft: (current_pos*98)
  45.         }, 200 );
  46.     });
  47.  
  48.     $('.nav_holder').click(function() {
  49.         if ($(this).attr("id") == "nav_holder_home") {
  50.             current_pos = 0;
  51.         } else if ($(this).attr("id") == "nav_holder_about") {
  52.             current_pos = 1;
  53.         } else if ($(this).attr("id") == "nav_holder_services") {
  54.             current_pos = 2;
  55.         } else if ($(this).attr("id") == "nav_holder_gallery") {
  56.             current_pos = 3;
  57.         } else if ($(this).attr("id") == "nav_holder_contact") {
  58.             current_pos = 4;
  59.         }
  60.     });
  61.  
  62. });
  63.        
  64. a.nav_link {
  65.     font: 18px/100px Tahoma, Arial, sans-serif;
  66.     z-index: 10;
  67. }
  68.  
  69. #nav_bar {
  70.     position: absolute;
  71.     top: 0px;
  72.     left: 490px;
  73.     width: 490px;
  74.     height:110px;
  75.     background-color:#f0f0f0;
  76.     overflow: visible;
  77. }
  78.  
  79. #nav_block {
  80.     position: absolute;
  81.     top: 0px;
  82.     left: 4px;
  83.     width: 90px;
  84.     height:110px;
  85.     z-index: 9;
  86. }
  87.  
  88. .nav_holder {
  89.     width: 98px;
  90.     height:100px;
  91.     text-align: center;
  92.     overflow: visible;
  93.     z-index: 11;
  94. }
create a new version of this paste RAW Paste Data