fadein cssホバリングの変更

Question

4つのdivがあります。すべて背景画像を持っているので、div1の上にマウスを置くと、スクリプトはdiv2,3,4の背景画像を変更する必要があります。これはアニメーション化（フェードイン？）する必要があります。

これはjqueryの「時間を経て学習した後のコード」ですが、jqueryでアニメーション化することはできませんでした。

HTML：

<div class="categories" style="color:#ccc;"> 
      <div class="single_cat first"></div> 
      <div class="single_cat second"></div> 
      <div class="single_cat third"></div> 
      <div class="single_cat fourth"></div> 
     </div> 

CSS：

#tour .categories{ 
    width: 950px; 
    height: 236px; 
    background-color: #efefef; 
    margin: 20px 0 0 0; 
} 

.single_cat { 
    width: 236px; 
    height: inherit; 
    margin: 0 2px 0 0; 
    float: left; 
    background-color: #222; 
    color: #fff; 
} 

.single_cat.fourth { 
    width: 236px; 
    height: inherit; 
    margin: 0; 
    float: left; 
    background-color: #222; 
} 

.single_cat.first { 
    background-image:url('/img/takethetour/r_text.png'); 
} 

.single_cat.second { 
    background-image:url('/img/takethetour/b_text.png'); 
} 

.single_cat.third { 
    background-image:url('/img/takethetour/c_text.png'); 
} 

.single_cat.fourth { 
    background-image:url('/img/takethetour/bou_text.png'); 
} 

jqueryの（Javaの）：

$(".first").mouseover(function() { 
    $(".second").css('background', 'url(/img/takethetour/r_2.png)'); 
    $(".third").css('background', 'url(/img/takethetour/r_3.png)'); 
    $(".fourth").css('background', 'url(/img/takethetour/r_4.png)'); 
    }).mouseout(function(){ 
    $(".second").css('background', 'url(/img/takethetour/b_text.png)'); 
    $(".third").css('background', 'url(/img/takethetour/c_text.png)'); 
    $(".fourth").css('background', 'url(/img/takethetour/bou_text.png)'); 
    }); 
    $(".second").mouseover(function() { 
     $(".first").css('background', 'url(/img/takethetour/b_2.png)'); 
     $(".third").css('background', 'url(/img/takethetour/b_3.png)'); 
     $(".fourth").css('background', 'url(/img/takethetour/b_4.png)'); 
    }).mouseout(function(){ 
     $(".first").css('background', 'url(/img/takethetour/r_text.png)'); 
     $(".third").css('background', 'url(/img/takethetour/c_text.png)'); 
     $(".fourth").css('background', 'url(/img/takethetour/bou_text.png)'); 
    }); 
    $(".third").mouseover(function() { 
     $(".first").css('background', 'url(/img/takethetour/c_2.png)'); 
     $(".second").css('background', 'url(/img/takethetour/c_3.png)'); 
     $(".fourth").css('background', 'url(/img/takethetour/c_4.png)'); 
     }).mouseout(function(){ 
     $(".first").css('background', 'url(/img/takethetour/r_text.png)'); 
     $(".second").css('background', 'url(/img/takethetour/b_text.png)'); 
     $(".fourth").css('background', 'url(/img/takethetour/bou_text.png)'); 
     }); 
     $(".fourth").mouseover(function() { 
      $(".first").css('background', 'url(/img/takethetour/bou_2.png)'); 
      $(".third").css('background', 'url(/img/takethetour/bou_3.png)'); 
      $(".second").css('background', 'url(/img/takethetour/bou_4.png)'); 
     }).mouseout(function(){ 
      $(".first").css('background', 'url(/img/takethetour/r_text.png)'); 
      $(".third").css('background', 'url(/img/takethetour/c_text.png)'); 
      $(".second").css('background', 'url(/img/takethetour/b_text.png)'); 
     }); 

Answer 1

背景画像がアニメーションすることができません。色や他のスカラー値だけがアニメ化できます。

Answer 2

あなたは、最初にフェードアウトして新しい背景を持つバックフェードインする非推移のdivを探しているなら、あなたはこのような何か必要があります：あなたは背景画像が必要な場合は

$(".first").mouseover(function() { 
    $(".second").fadeOut('slow',function(){ 
     $(this).css('background', 'url(/img/takethetour/r_2.png)').fadeIn('slow'); 
    }); 

Answer 3

を1つを他のものに直接フェードインするには、1つのdivを背景の中に入れ子にすることができます。内部divの背景をデフォルトの背景に設定し、外側divの背景を設定した背景に設定します。次に、内側divをフェードインまたはフェードアウトさせることができます。

内側のバックグラウンドdivにはコンテンツを配置したくないということを覚えておいてください。（希望の場合を除いて）フェードアウトしますので、別の兄弟divにコンテンツが含まれていることを願います。どのようにあなたのページがレイアウトされているかに応じて、すべてを正しく配置するには、少しCSSがかかるかもしれません。

これはその1つの基本的な考え方ですが、おそらくdivの位置とサイズを調整して正しく重なり合うようにする必要があることに注意してください。

<div class="div1outer">   <!-- has one background --> 
    <div class="div1bg"></div>  <!-- has the other background --> 
    <div class="div1content"></div> <!-- has the content --> 
</div> 

Answer 4

別のアプローチは、IMGのようにそれらを持っていると低Zインデックスでそれらのスタイルを、あなたの他のコンテンツの後ろにそれらを層にすることであろう。それは、バックグラウンドであることの制限を受けることなく「背景」としてそれらを持つのと同じ効果を生むことができます。 jquery fadeInを使用してアニメーション化できるようになりました。ちょっとハッキーだけど、仕事は終わった。