0

このサイトのようなメニューを作成したい 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>

ただし、問題は、次のメニュー項目に移動するときに、メニュー項目にカーソルを合わせるたびにアニメーションが繰り返されることです。提案が役立つ場合があります。

4

3 に答える 3

1

This could be an example:

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

with some CSS style:

Fiddle

于 2012-12-12T14:54:10.327 に答える
1

このデモをお試しください

単純なJqueryを次のように含めます。

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

});

=======編集1============

マウスアウトでプログレスバーを通常の位置に戻すには、マウスアウトイベントを追加するだけです。

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

DEMO2を参照してください

于 2012-12-12T15:13:04.893 に答える
0

ここに2つのjsfiddleの例があります：

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

http://jsfiddle.net/xXM2z/

そこでwidth、JQueryでも変更します。多分それはあなたを助けるでしょう。

于 2012-12-12T14:56:46.257 に答える