Question

我想创建一个像这个网站的菜单 http://www.easywaytea.com.au/ 不下拉部分只有进度动画

这就是我正在尝试的

$(document).ready(function(){
// box 1
$('#level2').mouseover(function(){
    $('#menu_progress').animate({width:"37%"});
});
$('#level2').mouseout(function(){
    $('#menu_progress').animate({width:"8%"});
});

}）;

<div class="menu_container">
    <nav class="menu">
        <ul>
            <li id="level1"><a href="index.html" class="current">Home</a></li>
            <li id="level2"><a href="current-promotions.html">Current Promotions</a></li>
            <li id="level3"><a href="our-drinks.html">Our Drinks</a></li>
            <li id="level4"><a href="faq.html">FAQ’s</a></li>
            <li id="level5"><a href="location.html">Location</a></li>
            <li id="level6"><a href="contact-us.html">Contact Us</a></li>
        </ul>
    </nav>
  <div id="menu_progress"></div>
  </div>

但问题是，当移动到下一个菜单项时，每次我将鼠标悬停在菜单项上时都会重复动画任何建议都会有所帮助。

Answer 1

这可能就是一个例子：

$('.menu ul li').mouseover(function(){
    var x = $(this).offset().left + $(this).width();
    $('#menu_progress').animate({width:x});
});

有一些CSS风格：

Fiddle

Answer 2

试试 DEMO

它包含简单的Jquery：

$(function(){
  $(".navLinks").on("hover","a",function(){
    width =$(this).position().left +parseInt($(this).width());
    $(".thermo").animate({width: width}, {queue: false});
  });

});

=======编辑1 ============

使进度条在mouseout上恢复正常位置只需添加鼠标输出事件

$(".navLinks").mouseout(function(){
  width =$(".navLinks .activeLink").position().left +parseInt($(".navLinks .activeLink").width());
  $(".thermo").animate({width: width}, {queue: false});
  });

请参阅 DEMO2

Answer 3

这里有两个jsfiddle示例：

http://jsfiddle.net/wmichaelgreen/Gj6Pv/

http://jsfiddle.net/xXM2z/

您也可以使用JQuery更改width。也许它会帮助你。

带进度条的菜单

3 个答案: