jQueryボタンで背景画像を変更する

Question

私は一連のボタンを作成したいと思います。ユーザーがボタンの上を移動すると、さまざまな画像をバックグラウンドで表示したいと思います。 bg画像間の遷移は滑らかなクロスフェードでなければなりません。

私は自分の設定を表示するには、コードを少し貼り付けました：http://jsfiddle.net/Rk4YG/

注：選択可能であることから、背景画像を停止するにはすてきなことだ - それはCSSの背景画像を使用して意味があるの？

誰でも私がこれを達成するためのコードを書くのを手伝ったり、良いチュートリアルの正しい方向を指してくれたら、私は信じられないほど感謝しています。

ご協力いただきありがとうございます。私たちは、HTML5のデータは、各背景画像の名前を格納するための属性を使用し

HTML

：ここ

Answer 1

は、あなたが始めることが何か。これらは後でjQuery .attr()関数を使用して取得されます。

<div role="main" class="mid"></div> 
<div class="btncontain"> 
    <div class="btn btn1" data-bg-img="image0.png"><a href="#">Button 1</a></div> 
    <div class="btn btn2" data-bg-img="image1.png"><a href="#">Button 2</a></div> 
    <div class="btn btn3" data-bg-img="image2.png"><a href="#">Button 3</a></div> 
    <div class="btn btn4" data-bg-img="image3.png"><a href="#">Button 4</a></div> 
    <div class="btn btn5" data-bg-img="image4.png"><a href="#">Button 5</a></div> 
    <div class="btn btn6" data-bg-img="image5.png"><a href="#">Button 6</a></div> 
    <div class="btn btn7" data-bg-img="image6.png"><a href="#">Button 7</a></div> 
    <div class="btn btn8" data-bg-img="image7.png"><a href="#">Button 8</a></div> 
    <div class="clearfix"></div> 
</div> 

CSS

.midは今、ボタンの後ろに座っています。どちらもレイヤリングの権利を得るために絶対的に配置されています。

body { padding: 0; margin:0; } 
.mid { width:100%; height: 700px; position:absolute; } 
.btncontain { width:80%; margin: 0 auto; position:absolute; } 
.btn a { width: 150px; height: 70px; background: yellow; float: left; margin: 0 30px 100px 30px; } 
.mid { background-image: url(image0.png); 

はJavaScript

jQueryのアニメーション機能は、バックグラウンドの上div.midフェードイン。 100％不透明になったら、背景イメージを新しいイメージに切り替えてdiv.midを非表示にします。

$(function(){ 
    $('.btn a').parents('.btn').hover(function(){ 
     var img = $(this).attr('data-bg-img'), 
      afterFadeIn = function() { 
       $('body').css('background-image', 'url(' + img + ')'); 
       $('mid').css('opacity', 0); 
      }; 
     $('.mid') 
      .css({'background-image': 'url(' + img + ')', 'opacity': 0}) 
      .animate({ 'opacity' : 1 }, 500, afterFadeIn); 
    }); 
});