トランジションで背景を開く

Question

私はJqueryを少し使ってウェブサイトを開発していますが、... divが動かされたときにボディの背景を表示するものが見つかりました。完璧に動作します。しかし、それはアニメーションなしです。私は少し退屈なアニメーションを訪問者を怖がらせないようにしたい。私はFadeinを試してアニメーション化しましたが、動作しません。

これは完全に動作するコードです。 私はこの基本的な「出現」遷移をどのように追加するか分かりません。

$(document).ready(function() { 

//Preload 
$('<img/>').hide().attr('src', 'http://4.bp.blogspot.com/-3YtwFdb01YI/TnCNSc1c93I/AAAAAAAAA5c/V6g_3ghlw30/s1600/Background+13.jpg').load(function(){ 
    $('body').append($(this)); 
}); 

$('#fb').hover(function() { 
    $('body').css('background-image', 'url("http://4.bp.blogspot.com/-3YtwFdb01YI/TnCNSc1c93I/AAAAAAAAA5c/V6g_3ghlw30/s1600/Background+13.jpg")'); 
}, function() { 
    $('body').css('background', ''); 
}); 

}）;

ITを理解するのに役立ちます：http://jsfiddle.net/kGgyY/98/ 私を助けてくれてありがとうを、そして私の英語のため申し訳ありません。

Redbean、

Answer 1

チェックこのフィドルアウト、http://jsfiddle.net/194Ld5zo/

JS：

$(document).ready(function() { 

    $('#fb').mouseenter(function() { 
    $('.wrapper').fadeIn(500);  
    }); 

    $('#fb').mouseleave(function() { 
    $('.wrapper').hide(); 
    }); 

}); 

HTML：

<div class="wrapper"> 
</div> 
<h1><a href="" id="fb">Hover here</a></h1> 

CSS：

body { 
background-repeat: repeat; 
} 

#fb { 
top: 0; 
position: absolute; 
} 

.wrapper { 
display: none; 
width: 500px; 
height: 500px; 
background-image: url("http://4.bp.blogspot.com/-3YtwFdb01YI/TnCNSc1c93I/AAAAAAAAA5c/V6g_3ghlw30/s1600/Background+13.jpg"); 
} 

ボディの代わりに背景画像がdivに付加されている以外は、あなたの望むものがあります。

編集：ここですべてのあなたのjavascriptファイルは変更されません別の1（http://jsfiddle.net/kGgyY/143/が）だ、私は単に次のCSSを追加しました：

body { 

background-image: url("http://rs664.pbsrc.com/albums/vv4/TSAnanth/Blank%20Page/B9EAE5A5.jpg~c200"); 
background-size: cover; 
-o-transition:.5s; 
-ms-transition:.5s; 
-moz-transition:.5s; 
-webkit-transition:.5s; 
transition:.5s; 

} 

CSSで指定した背景画像がちょうど空白であります画像。

Answer 2

こんにちはので、私はそれにslide toggleをしましたが、私が

を考えたほど効果的ではなかったが、これは私があなたに「遅い」よりも遅く行くことができるとは思わないリンクhttp://jsfiddle.net/RachGal/up6e0w34/

ですslidetoggleですが、段落のテキストやものに適しています

フェードイン（あなたが試したと言いましたか？）が効果的だと思います。鉱山は、これは

レイチェル

P.S.を助け、さらに

http://jsfiddle.net/RachGal/jkvkycvw/

・ホープ1000ミリ秒（1秒）に設定されていますが、これを遅くすることができますボンヌイット！

ところで、それはかなり暗いイメージです。あなたは少しそれをフェードアウトしたい場合は、常にhttps://jsfiddle.net/RachGal/torunyx5/1/にここ

このバイオリンのように不透明度を下げるためにフィルタを適用することができ、これはフェードインスニペット

$("#tog").hover(function(e) { 
 
    $("#fb").fadeIn("1000"); 
 
}); 
 

 
/* slide toggle 
 
$("#tog").hover(function(e) { 
 
    $("#fb").slideToggle("slow"); 
 
}); 
 
*/

h1 { 
 
    color: black; 
 
} 
 

 
#fb { 
 
    background: url('http://4.bp.blogspot.com/-3YtwFdb01YI/TnCNSc1c93I/AAAAAAAAA5c/V6g_3ghlw30/s1600/Background+13.jpg') repeat; 
 
    background-repeat: repeat!important; 
 
    min-height: 800px; 
 
    width: auto; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<h3 id="tog">Hover here</h3> 
 
<div id="fb">&nbsp;</div>