1

jqueryを使用してcssの変更をアニメーション化することは可能ですか？

誰かが私に例を提供してくれるほど親切であるならば、私は多くの義務を負います。

基本的に、jQueryを使用してcssのbackground-imageを操作することにより、スプライト手法をアニメーション化しようとしています。目標は、ホバーをアニメーション化して、以下のコードによって生成される突然のスイッチではなく、適切なフェードを取得することです。

これが私がいるところです：

HTML：

<h1 id="solomon">Solomon</h1>

CSS：

body#default h1 {
text-indent: -9999px;
display: inline-block;
height: 213px;
}
body#default h1#solomon {
    background: transparent url(/images/S.gif) center top no-repeat;
    width: 183px;
    margin: 100px 0 0 216px;
    }

JQUERY：

$(function() {
$('h1').hover(function() {
    $(this).stop().css('background-position', 'center bottom');
}, function() {
    $(this).stop().css('background-position', 'center top');
});
});

今のところ正常に動作しますが、ホバーにきれいなアニメーションはありません。背景画像の配置を切り替える効果をアニメーション化する方法を知りたいです。

これを撃った人に感謝します。:)

誰かが私にチュートリアルを教えずに私の質問に答えてくれることを望んでいますか？チュートリアルに関する私の問題は、これらすべてが、この時点でかなりロックされているHTMLを変更することを強制することです。

また、上記の例（@CMS）でanimate関数が機能しないのはなぜですか？

皆さんの助けに感謝します！:)

4

3 に答える 3

3

フェード効果を作成するには、1 つの要素を他の要素の上に完全に配置し、要素の不透明度をアニメーション化して下の画像を表示する必要があります。

HTML を変更することはできないため、H1 タグの新しい画像を表示するスパンを動的に挿入して、JavaScript を使用してマークアップを変更することをお勧めします。

マークアップ (つまり、H1 タグのみ) を使用する jsbin.com で実際の例をまとめました。jqueryfordesigners.com チュートリアルの画像を使用しました (私のものなので) 必要な CSS の変更を理解できるようにします。

具体的には、H1 内にネストされた SPAN をスタイル設定して、H1 内に完全に配置し、フェードインできるようにする必要があります。

http://jsbin.com/adike/ (編集するには: http://jsbin.com/adike/edit/ )

于 2009-01-01T20:26:16.000 に答える
2

この記事では、Two Image Technique

[アップデート]

より良いチュートリアルを見つけました： この記事では、フェード画像（ロゴなど）を作成する方法を説明します

于 2008-12-26T23:32:49.230 に答える
1

背景の位置をアニメーション化するには、このプラグインを使用する必要があります:)

于 2010-06-11T08:35:10.913 に答える