2

私は次のナビを持っています

<nav>
   <a href="#" class="current">HOME</a>
   <a href="#">ABOUT</a><a href="#">CONTACT</a>
</nav>

このスタイリングで：

nav a {
    font-family: monospace;
    display: inline-block;
    width: 114px;
    height: 29px;
    font-size: 14px;
    line-height: 29px;
    text-align: center;
    text-decoration: none;
    color: white;
    background-color: #004870;
}
nav a {
    margin-left: 7px;
}
nav a.current{
    background-color: #585858;
    color: white;
}

そして、BG カラーを前後にアニメーション化し、スタイル属性を再び削除したいと考えmouseoverて#585858い#a3a3a3ますmouseleave。

このコードを試しましたが、スタイル属性は後に残りますmouseleave:

$(document).ready(function() {
   $('nav a:not(.current)').mouseenter(function() {
   $(this).stop().animate( {
          backgroundColor: '#585858'
   }, 300);
});
$('nav a:not(.current)').mouseleave(function() {
$(this).stop().animate( {
    backgroundColor: '#004870'
}, 300).removeAttr('style');
    });
});

では、アニメーションの終了後にスタイル属性を削除するには、どのような変更が必要なのでしょうか?

4

6 に答える 6

9

jQuery.animateここでは、非同期であるという事実を見逃しているためremoveAttr、アニメーションが終了する前に呼び出されます。を呼び出すには、完全なコールバックを使用する必要がありますremoveAttr。

アニメーション化できるようにするには、 jQuery.Color()プラグインも必要です。jQuery.animatebackground-color

var $this = $(this);
$this.stop().animate({ backgroundColor: jQuery.Color("rgb(0, 72, 112)") }, {
    duration: 300,
    complete: function() { $this.removeAttr('style') }
});
于 2013-01-17T08:32:14.700 に答える
0

このイベントはCSSで処理できます。Javaスクリプトを使用する必要はありません。

これでcssコードを更新します

nav a 
{
    font-family: monospace;
    display: inline-block;
    width: 114px;
    height: 29px;
    font-size: 14px;
    line-height: 29px;
    text-align: center;
    text-decoration: none;
    color: white;
    background:#a3a3a3;
}
nav a {
    margin-left: 7px;
}
nav a.current{
     background:#585858;
    color: white;
}
nav a:hover{
    background:#585858;
}

このフィドルを確認してください http://jsfiddle.net/uTYFC/2/

于 2013-01-17T09:20:59.507 に答える
0

、、、またはを必要とするCSS3バージョンChromeSafariOperaFirefox 5+IE10

nav a:not(.current) { 
    animation:navOut 1s forwards; 
}

nav a:not(.current):hover { 
    animation:navOver 1s forwards; 
}

@keyframes navOver { 
    to { background-color:#a3a3a3; } 
}

@keyframes navOut { 
    from { background-color:#a3a3a3; } 
    to { background-color:#004870;} 
}

http://jsfiddle.net/pbaris/d6msw/

于 2013-01-17T09:01:43.670 に答える
0

jQuery は色をアニメーション化できませんが、このように jQuery プラグインを追加できます

<script src="http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js"></script>

http://jsfiddle.net/gRTHv/1/

于 2013-01-17T08:37:00.330 に答える
0

color をアニメーション化するには jquery-ui プラグインが必要です。現在の jquery ui を含むコードを見てください: http://jsfiddle.net/sUeBd/1/

$(document).ready(function(){
  $('nav a:not(.current)').mouseenter(function(){
    $(this).stop().animate({
            backgroundColor: '#585858'
    }, 300);
  });
  $('nav a:not(.current)').mouseleave(function(){
    $(this).stop().animate({
        backgroundColor: '#004870'
    }, 300).removeAttr('style');
  });
});
于 2013-01-17T08:26:47.283 に答える
0

アニメーションで背景色を変更することはできません...必要な場合は、jQuery.Color()プラグインを使用する必要があります。このためにjquery uiプラグインをロードするだけです

ドキュメントによると..

以下に示す場合を除き、すべてのアニメーション化されたプロパティは単一の数値にアニメーション化する必要があります。数値でないほとんどのプロパティは、基本的な jQuery 機能を使用してアニメーション化できません (たとえば、幅、高さ、または左はアニメーション化できますが、jQuery.Color() プラグインが使用されない限り、背景色はアニメーション化できません)。特に指定がない限り、プロパティ値はピクセル数として扱われます。必要に応じて、単位 em および % を指定できます。

ドキュメントはこちら

そしてuiプラグインをいじる

于 2013-01-17T08:27:02.457 に答える