1

私はこのjqueryコードを持っています。

//this is the main javascript

$(document).ready(function(){

    $('nav.menu a').hover(
        function () {
            $('nav.menu').find(".current_item").removeClass("current_item");
            $(this).addClass("current_item");

        }, 
        function () {
            $(this).removeClass("current_item");
            $('nav.menu').find(".damenu").addClass("current_item")
        }
);

});

そしてこのhtml構造

<nav class="menu">
    <a href="home.html" class="current_item damenu">Home</a>
    <a href="gallery.html">Gallery</a>
    <a href="home.html">Portfolio</a>
    <a href="home.html">About</a>
    <a href="home.html">Contact</a>
</nav>

そしてこのcss

.menu
{
background: 1px solid #00ffff;
width: 100%;
padding: 0px 0px 0px 10px;
}
.menu a
{
padding: 8px;
color: #0099ff;
font: bold 20px Archivo Narrow, Arial Rounded MT, Tahoma, Calibri, Asap, Arial,     Verdana, sans-serif;
text-decoration: none;
float: left;
margin-right: 8px;
text-shadow: 2px 1px 1px #ffffff;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
}
.current_item /*, .menu a:hover*/
{
color: #C5F700 !important;
border-top: 3px solid #C5F700 !important;
border-bottom: 3px solid #C5F700 !important;
}

ご覧のとおり、ルーチンは次のとおりです。現在のメニューのクラスがあり、ユーザーがメニューの 1 つにカーソルを合わせるたびに、現在のメニューのクラスが削除され、クラス「current_item」が現在のホバー メニューに追加されます。 mouseout イベントでは、クラス "current_item" が現在ホバーされている要素から削除され、クラス "current_item" が現在のメニューに追加されます。このメニューには "damenu" クラスもあり、クラス "current_item" の動作を確認できます。 」は上下の境界線を追加することであり、うまく機能しますが、マウスオーバーまたはマウスアウト時に境界線またはクラス「current_item」にアニメーションを追加したいと考えています。

正確には、マウスオーバーまたはマウスアウトイベントのときに境界線またはクラス「current_item」をアニメーション化したいのですが、ナビゲーションを中央にすることはできますか?

私は、アイデア、推奨事項、提案を受け付けています。ここの誰かが助けてくれることを願っています、ありがとう。

4

3 に答える 3

1

に以下を追加することはできません.current_itemか？

-webkit-transition: .5s border-color, color ease;
-moz-transition: .5s border-color, color ease;
-ms-transition: .5s border-color, color ease;
-o-transition: .5s border-color, color ease;
transition: .5s border-color, color, ease;
于 2012-10-03T10:47:43.637 に答える
0

JQuery カラー アニメーション プラグインを取得してから、次の手順を実行します。

 $('#currentitem').hover(function(){
        (this).animate({borderColor:'#fff'});
    }, function(){
       (this).animate({borderColor:'#000'});
    });
于 2012-10-03T10:48:21.993 に答える
0

css だけで境界線をアニメーション化できます

.menu
{
background: 1px solid #00ffff;
width: 100%;
padding: 0px 0px 0px 10px;
}
.menu a
{
padding: 8px;
color: #0099ff;
font: bold 20px Archivo Narrow, Arial Rounded MT, Tahoma, Calibri, Asap, Arial,     Verdana, sans-serif;
text-decoration: none;
float: left;
margin-right: 8px;
text-shadow: 2px 1px 1px #ffffff;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
-webkit-transition: 1s all ease;
-moz-transition: 1s all ease;
-ms-transition: 1s all ease;
-o-transition: 1s all ease;
transition: 1s all ease;
}
.menu a.current_item, .menu a:hover
{
color: #C5F700 !important;
border-top: 3px solid #C5F700 ;
border-bottom: 3px solid #C5F700 ;
}
于 2012-10-03T11:42:00.437 に答える