問題タブ [background-position]

私はJqueryに非常に慣れていませんが、別の「トリガー」画像にカーソルを合わせたときに #contentContainer の背景画像（スプライト）を変更する方法を最終的に解決しました。ただし、私の人生では、トランジションにフェード効果を適用する方法を理解できません。基本的に、現在の突然の背景画像の遷移の代わりに、マウスオーバーとマウスアウトでスムーズにフェードインしたいと思います。

これが私の（非フェードですが動作する）スクリプトです：

助けてくれてどうもありがとう！

このサイトをチェックしてください：

http://photoshop.tutorialcraft.com/

太陽が上に移動し、次に右に移動することに注意してください。これが私のコードです：

2 つのまっすぐなアニメーションではなく、よりアーチ型のパターンで進むことができればいいのにと思います。間に 2 つの「キーフレーム」を作成すると、アーチが配置される位置で、途切れ途切れに見えます。これは、Jquery が一方から他方へ流れるのではなく、アニメーションを緩和するためです。

私はこれを行う方法を理解するのに十分な数学が得意ではありませんが、ウィンドウの幅は実行の直前に計算されるため、誰かがこれを行う方法を知っていると確信しています.

では、これを point-to-point ではなくアーチでアニメーション化するにはどうすればよいでしょうか?

標準のaspボタンがあり、クリックするとトリガーされます。

問題は、ボタンがクリックされたときに背景が右に70ピクセルシフトしないことです。

これはこれを行う正しい方法ですか、それとも構文の問題ですか？

私はjQuery（および一般的にはJS）を初めて使用し、それを使用してナビゲーションロールオーバーにフェードイン効果を追加できることを知っています。

現在、ナビゲーションにマスター背景スプライトを使用しています。：hoverでは、背景位置ルールを追加して、各アイテムのスプライトを下にシフトし、ホバー効果を取得しています。

ただし、jQueryを使用して、ロールオーバー効果にスムーズに移行したいと思います。私はそれをグーグルで検索し、いくつかの類似した情報を見つけましたが、ほとんどの場合、私が見つけたものは、2つの画像があり、一方をフェードアウトしてもう一方を表示する場合を扱っていました。しかし、私はCSSのbackground-positionを使用して、画像を単純に下にシフトしています。jQueryを使用してこれをよりスムーズに行うことはできますか？

ここにサイトがあります：http： //tuscaroratackle.com

これは、IE8でのみ背景位置を右に設定した場合に発生します...

次のURLで確認できます：http ：//www.scrapingweb.com/quote.html （[お問い合わせ]タブ）

私は新しいプログラマーであり、英語は母国語ではありません。プログラミングと英語の間違いの両方について、事前にご容赦ください。

これが私がやりたいことです：私は画像とテーブルを含むdivタグを持っています（このdivタグの外に）。jqueryを介して、「トリミング効果」をアーカイブしようとしているので、テーブルをドラッグ可能にし、ドラッグ中に画像をコピーしてテーブルの背景として設定します。次に、テーブル内の画像の背景位置を動的に設定できるようにする必要があります。これにより、画像をドラッグしたときに静止しているように見えます。トリミング効果は、元の画像の不透明度を変更（下げる）することでアーカイブされます。セレクションなどを作成する必要はないことに注意してください。テーブルは最初に指定されたサイズで作成されます。これが完了したら、テーブルを画像上にドラッグして、トリミング効果を作成します。

これが私の問題です。jquery（.css）を使用して背景画像の位置を設定すると、上部の位置が変更されず、左側の位置が期待どおりに機能しません。

javascriptコードを見てみましょう：

背景の位置は現在適切に設定されていませんが、現時点ではそれほど重要ではありません。一番上の位置も動的に変更する方法があることを願っています。後で計算について心配します。また、それが十分に明確であることを願っています。敬具、

アイリーン

たくさんのアイコンを持つスプライトがあるとしましょう。アイコンの 1 つを div 上の特定の位置に配置したいと考えています。たとえば、右側から 15 ピクセル、上から 20 ピクセルです。以前は、単一の画像ファイルを持っていたときに、次のコードを使用しました。

これで、画像はスプライトにあり、次を使用してアクセスできます

しかし、私が見ているように、現在の 91% 47% を追加する場所はありません。何らかの回避策はありますか？役立つ場合は、プロジェクトで CSS3 を使用することが可能です。

ありがとう！

夕方！要素がクリックされたときに要素のCSS背景位置を変更する必要があるスクリプトの半分があります-これは正常に機能します。ただし、2回目のクリックで背景位置を00にリセットするCSSが必要です。

よろしくお願いします！

タイトルなどの背景画像としてアイコンを使用していますが、すでにbackground-positionを使用して正しく配置しているため、背景画像をスプライトの適切なスライスに置き換えたい場合、背景を正しく配置できなくなります。解決？

スライスしたスプライトを背景として配置するためだけに（ホバーで1回変更する以外は）アニメーション化したくありません。ただし、background-positionはすでに取得されています。

.beautifu1-gallery {background-position：-130px 0; }

次に、同じdivに別の背景位置を追加します。

別のdivを追加しても機能する可能性がありますが、解決策として必要なほどエレガントではありません。

編集されたコメント：量の要求が大幅に減少したとしても、スプライトは私には実用的ではないようです-したがって、すべてのアイコンを別々の画像としてコーディングする必要がありますか？それらを背景としてマークアップするときは、タイトル、ナビゲーション、画像、およびダウンロード可能な資料の背景を説明するのが明らかに簡単です。別のdivを追加することも、エネルギーの浪費のようです。開発者は、インターネットの仕組みが依然としてテキストベースの情報に関連しており、複数の画像、ビデオ、グラフィックス、アニメーションをユーザーからサーバーに、またはその逆に効率的に転送する方法を誰も考えていないようだと非難していますか？

これはポルノではなく開発です-全体像を考えずに見ることができるすべての穴を塞ぐことを試みます。

了解しました-私は欲求不満からグーグルで検索し、データURIとMHTMLが何であるかを知りました。ゲームオーバー！

幅100％、高さ284pxの#photoStripeというdivと、幅5000pxの背景画像があります。次に、その上に左右のナビゲーションボタンがあります。アイデアは、背景画像を左右に段階的にアニメーション化することにより、左右にパンできるようにすることです。

私は人気のある背景位置プラグインを使用しています。これを使用すると、背景位置のx値とy値を同時にアニメーション化できます。

さて、背景はアニメートしますが、それは一度だけです。（何度もクリックすることはできません）何かアイデアはありますか？

jQuery：

CSS：