addClass/removeClass にフェード トランジションを追加するために、jQuery UI を使用しています。
$(document).ready(function(){
$('header nav a').hover(
function(){
$('header').stop().removeAttr("style").addClass('header-pink', 'slow')
},
function(){
$('header').stop().removeClass('header-pink', 'slow')
}
)
});
私の目標は、子要素をホバーする（ナビゲーションをホバーする）ときに、親要素（ヘッダー）の背景色を（フェードアニメーション/効果で）変更することです。css クラスは非常に単純です。
.header-pink { background: pink; }
HTML:
<header>
<nav>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</nav>
</header>
もちろん、エラーなしで jQuery と jQuery UI を呼び出しています。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"</script>
<script src="js/libs/jquery.effects.core.min.js"></script>
次の理由により、jQuery スクリプトが正しく機能しません。
- クラスが追加されますが (onmouseover)、トランジション (フェード) 効果はありません。
- クラスは望ましくない方法で追加されます:
<header style="background: pink;">私は.removeAtrr("style")この奇妙な動作を避けるために使用します。 - クラスは削除されません (onmouseout)。
.animate()jQuery UI で色をアニメーション化するために使用することは避けたいと思っています。なぜなら、私は LESS で変数を使用しており、もちろん、スタイルはスタイルシートによってのみ変更されるようにしたいからです。
アイデアを得るために私のプロジェクトをチェックしてください。ご覧のとおり、私の意図は<header>、カーソルをリンクの上に置いたときに固定の背景色をリンクの色に置き換えることです。言い換えれば、<header>ポインターが「投稿」リンクにホバーするとすぐに、遷移フェード アニメーション/効果を伴うターンの背景色が青またはピンクになります。または「リンク」。.removeClass()ただし、ポインターが同じ遷移フェード アニメーション/効果で外に出るとすぐに、元の状態 (CSS クラスなし) に戻ります。私のプロジェクトはまだ開発中であり、現在、すべてのリンクに対して同じプロパティを使用して効果をテストしていることに注意してください。目的の結果が得られたら、すべてのリンクに個々のプロパティ (背景色) を適用します。