私はバックグラウンド画像とスライダを持つページを持っています。両方とも同時にファドゥーとフェードインしています。問題は、私が背景画像を含んでいるdivにfadeoutを適用すると、その子供たちもまたフェードアウトすることです。それを避ける方法はありますか？その子ではなく親にフェードアウトする
<div id="background">
..... // all the page content goes here.
<div id="slider">
</div>
</div>
<script>
function fade(){
$('#background').dealy(5000).fadeout(1000,function(){//change the image}).fadein(1000, fade());
//same for slider
}
</script>`
私はOPの質問を理解していれば、彼は背景#backgroundの画像が、その子供やコンテンツのどれをフェードアウトしたいと考えています。
私が正しく理解していれば、以下のように、あなたが#backgrounddivのための2つのクラスを作成する必要があります。
div#background.nobg {
background-image: none;
background-color: transparent;
}
div#background.hasbg {
background-image: url('url/to/bg.png');
}
そして、次のようにclass属性をアニメーション化できるjQueryのを使用して：
$('#backround').animate({ 'class': 'hasbg' }, 'slow', 'easein');
これはjQuery UIでのみ機能します。 jQueryはクラスをアニメーション化しません。 – Seth
私は信じているがはるかに簡単な解決策は、z値が低く、位置が固定された別のdivに背景を置くことです。
<head>
<style>
#background{position:fixed; top: 0; left:0; height:100%;width:100%; z-index: 0; background-color:#00f;}
#content{ z-index:1; background-color:white; height:50%;width:50%; position:absolute;}
</style>
</head>
<body>
<div id="content">Content goes here</div>
<div id="background"></div>
<script type="text/javascript">
$('#background').delay(5000).fadeOut(1000,function(){ $('#background').fadeIn(1000).css('background-color','#f00');});
</script>
</body>
これで、コンテンツに影響を与えずに、背景で何でもできます。
私が理解しているかどうかわからない...あなたはdivを消したいが、divの内容は消えない？あなたはまさにそれから消えていくでしょうか？ – asawyer
BenMは正しいですが、#background divでイメージをフェードアウトしますが、その中のコンテンツはフェードアウトしません。 – Paneri