問題タブ [cross-fade]

http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/の指示に従って自動スライドショーを作成しました

js は次のようになります。

これは、fadeIn/fadeOut する要素が 1 つだけのコンテンツ領域では問題なく機能します。たとえば、次のようになります。

しかし、構造化された要素を切り替える別のスライドショーがページに必要です。

ここで見ることができます：http://jsfiddle.net/ehLdW/4/

---編集--- スクリプトのエラーを突き止めるために少し遊んでみました...逆の順序で動作するようにスクリプトを変更しました

問題は同じです。クロス フェード効果はありませんが、フェード アニメーションは 1 つしかありません。興味深いのは、元のバージョンでは新しい要素のfadeInトランジションのみが表示されたのに対し、逆順のバージョンでは現在の要素のfadeOutトランジションのみが表示されたことです。

そのため、要素の効果が常に表示されます。インデックスが高いほど、それを修正する方法についての手がかりがありません...

ボタンを使用して 2 つの画像間のクロスフェードに問題があります。ボタンは実装されていませんが、問題は画像ビューを読み込めないことです。Eclipse は Java コードでエラーを出しませんが、アプリケーションを実行しようとするとクラッシュします。MainActivity.java、LogCat、および XML ファイルを以下に含めました。

私のxml：

ログキャット:

Android でのクロスフェードに関して多くの質問がありますが、それらにはすべてアニメーションが含まれています。私の質問は、ViewPager の OnPageChangeListener を使用したクロスフェードについてです。

無制限の数のビューを持つことができる ViewPager がありますが、実際には約 6 または 7 ビューを使用します。そこにはあまり進んでいません。

ViewPager の各ビューには背景ビットマップがあり、ビューの残りの部分と一緒にスクロールするのではなく、固定して次の (または前の) ビューの背景とクロスフェードする必要があります。

これを実現するために、背景を分離して ArrayList に追加し、後でそれらを ImageViews に割り当てました。しかし、アクティビティが多数の ImageView で終わる可能性を危険にさらしたくないので、次の構造を考えました。

次に、OnPageChangeListenerViewPager に a が割り当てられ、背景が ImageViews に割り当てられます。

背景を交換したいだけなら、これでうまくいきます。ユーザーがViewPagerをスワイプしている間、背景が互いにクロスフェードするようにします。前方スクロールのフェードは機能していますが、後方スクロールのフェードがどういうわけか良い結果をもたらさない理由がわかりません。後方スクロール中に、中央の背景が下部の背景にフェードインする必要があります。

私は何かが欠けているのではないかと心配しています。下の背景のアルファを変更することはありませんが、ログの結果は常にgetAlpha()中央の背景とまったく同じ値を示します。

そして待って！修正方法が本当にわからないことがもう1つあります。前方スクロールフェードは機能していますが。バックグラウンドで非常に短いちらつきがあります。これは、メソッドの設定方法が原因で発生していると思いonPageSelectedます。

この動作を作成/修正する別の方法はありますか?

固定サイズの画像を使用する代わりに、この jQuery 効果を変換する方法を知っている人はいますか?サイズをパーセンテージ (幅:100%; 高さ:自動) で設定して、応答できるようにする必要があります。何か案は？

これは私がこれまでに得たものです: fiddle . ボタンの上にカーソルを置いたときに別の画像に変更したい背景があります（いくつかのボタン、いくつかの画像があります）。

HTML:

CSS:

私はほとんどそこにいます！ボタン一つで完璧に機能します。2つではそれほどでもない。私が修正できない主な問題は、背景画像を「何もない」状態にしてから元に戻すのではなく、互いにフェードさせることです。また、別のリンクを追加するとどうなるかわかりません。

彼らはまさに私がやりたいことをやってくれましたが、私には彼らがどのようにそれをしたかを理解する勇気がありません.

3 つのクロスフェード画像でスライドショーを作成するためのスマートなソリューションを探しています。

アクティブな画像は

1. 3 秒で 80% の不透明度にフェードインします
2. 1秒間留まる
3. 3秒でフェードアウトして不透明度0%

すべての画像で同じことを行う必要がありますが、時間のオフセットは 2 秒です。その結果、3 つの画像すべてが同時に表示されます。

これが私の最初のフィドルです

--

これが最終的なコードです - http://jsfiddle.net/guest271314/9c32wkuk/14/ - 期待どおりに動作します。
アイデアをありがとうguest271314!

私はこれを何時間も研究してきましたが、自分のコーディングではうまくいきません。

これが私がこれまでに持っているものです：http://brynntweeddale.com/

ABOUTをリンクにしてクリックして画像をテキストに置き換えたいと思います。できれば画像がフェードアウトし、テキストがフェードインします。

ただし、各リンクでこれを実行できるようにしたいです。これはよくウェブサイトで見かけますが、よくわかりません。私もこれらすべてに慣れていません。

前もって感謝します。

これに対する具体的な解決策を見つけることができなかったので、誰かが私を助けてくれることを願っています.

私は3つの画像を持っており、最初の画像から2番目、3番目の画像にマウスオーバーまたはホバーしてそこで停止し、マウスアウトで逆方向に循環させたいと考えています。

マウスオーバー | 元の画像 > 画像 2 > 画像 3 | 止まる

マウスアウト | 画像 3 > 画像 2 > 元の画像 | 止まる

JQueryを使用するのが最善だと思いますが、どんな解決策でも大歓迎です。

http://css3.bradshawenterprises.com/cfimg/

ここでのデモ 1 は 2 つの画像に対してかなりうまく機能しますが、画像には透明な領域があるため互いに重なっていますが、画像間のフェード効果は完璧です。

アップデート

そのサイトのデモ1に基づいて、CSSを使用してこれを行ったと思います。

これは私の目的にはかなりうまくいくようです。最初の画像がフェードアウトして 2 番目の画像だけが残り、3 番目の画像がフェードインします。次に、マウスアウトで逆に同じことを行います。しかし、これが最善の方法であるかどうか疑問に思っていましたか？または互換性の問題がある場合は？どんな助けでも大歓迎です。