jquery無法在動畫菜單列表中返回活動狀態

我有一個菜單列表，它可以在mouseover上爲背景位置設置動畫，並且可以工作。當backgroundPosition：0菜單項被激活時。但是我希望列表中的第一個項目在用戶沒有懸停在其他列表項目上時返回到活動狀態。jquery無法在動畫菜單列表中返回活動狀態

這是我到目前爲止，movesover動畫效果正在工作，但我不知道如何讓第一個項目返回到活動狀態。

jQuery的

$(function() { 
    //Edited... 
    //services menu background effect 
    var timer; 
    function invocation() { 
     timer = setTimeout(function() { 
      $('#services li:first a').stop().animate({ 
       backgroundPosition: 0 
      }, 500); 
     }, 300); 
    } 
    $('li.menu a').each(function() { 
     $(this).css({ 
      backgroundPosition: -416 
     }); 
     $(this).mouseover(function() { 
      $(this).stop().animate({ 
       backgroundPosition: 0 
      }, 500) 
      if ($(this).attr('id') != 's_active') { 
       $('#services li:first a').stop().animate({ 
        backgroundPosition: -416 
       }, 500); 
      } 
      clearTimeout(timer); 
     }).mouseout(function() { 
      hover = false; 
      $(this).stop().animate({ 
       backgroundPosition: -416 
      }, 500) 
      invocation(); 
     }); 
    }); 
    $('#services li:first a').css({ 
     backgroundPosition: 0 
    }, 500); 
    //invocation(); 
});

HTML

<div id="services"> 
    <h1>Services</h1> 
    <ul> 
     <li id="s_active" class="menu"><a href="#">Semi/Intensive courses</a> </li> 
     <li class="menu"><a href="#">Pass plus/Motorway tuition</a></li> 
     <li class="menu"><a href="#">Block bookings</a></li> 
     <li class="menu"><a href="#">Mock theory and Mock practical tests</a></li> 
    </ul> 
</div>

來源

2012-06-06 user794846

你可以給我們工作的jsfiddle就在這裏你去http://jsfiddle.net/wDwg6/但背景圖像不可見的動畫，因爲我不能添加回工作:) – shareef

將圖像映射到一個標籤。 – user794846

看起來你的.mouseout（）和.mouseleave（）正在爭奪誰來動畫bg位置。 – killebytes

以下是我會做jsFiddle

只需更換

doBackgroundEffect()

與backgroundPosition動畫

來源

2012-06-12 04:45:30 killebytes

jquery無法在動畫菜單列表中返回活動狀態

回答

相關問題