私は少し問題があります。だから私は入力があるウェブサイトを作っていて、URLを貼り付けると背景イメージが変わるでしょう。それは変化していますが、問題はバックグラウンドがちょうど点滅し、全体的に見えるということです。私はfadeIn/fadeOutで何かを試しましたが、期待どおりに何も動作しません。もう1つの問題は、新しいURLを貼り付けるまで背景が突然消えるボタンをクリックすることです。Jquery背景画像FadeOut
$('#bg-btn').click(function(){
$('#bg-toggle').slideToggle('slow');
$('#bg-url').keyup(function(){
var value = $(this).val();
$('#main-bg').css('background-image',
'url("' + value + '")');
}).keyup();
});
$('#bg-btn').click(function(){
$('#bg-toggle').slideToggle('slow');
$('#bg-url').keyup(function(){
var value = $(this).val();
$('#main-bg').css('background-image', 'url("' + value + '")');
}).keyup(); <<<<<<<<<<<<<<<<<<<<<<<<<< This one
});
ボタンをクリックすると、赤色の空白の値（背景画像なし）..だから、あなたはkeyup（）を削除する必要があります。最初の問題のためのエンド
から、あなたは... .hide()とを使用することができますので、あなたのコードは、この
$('#bg-btn').click(function(){
$('#bg-toggle').slideToggle('slow');
$('#bg-url').keyup(function(){
var value = $(this).val();
// you can use .hide() and fadeOut()
$('#main-bg').hide(0).css('background-image', 'url("' + value + '")').fadeOut(100);
});
});
ようにする必要がありますしかし、私はために、コードを分離する方が良いだろうと思います
$('#bg-url').keyup(function(){
var value = $(this).val();
// you can use .hide() and fadeOut()
$('#main-bg').hide(0).css('background-image', 'url("' + value + '")').fadeOut(100);
});
$('#bg-btn').click(function(){
$('#bg-toggle').slideToggle('slow');
if($('#bg-url').val().trim() !== ''){ // if url is not empty
$('#bg-url').keyup(); // or $('#bg-url').trigger('keyup');
}else{ // if url empty
console.log('No background image found');
}
});
あなたは要素の不透明度プロパティで遊んで、jQueryを使ってフェードが方法をアニメーション化を実現することができます：あなたはすでにあなたのコードの末尾に（）.keyup使う第二の問題について
$('#bg-btn').click(function(){
$('#bg-toggle').slideToggle('slow');
$('#bg-url').keyup(function(){
var value = $(this).val();
var duration = 500; //Duration of animation in ms
$('#main-bg').animate({
opacity: 0;
}, duration, function(){
$('#main-bg').css('background-image', 'url("' + value + '")');
$('#main-bg').animate({
opacity: 1;
}, duration, function(){
// End of animation
});
});
}).keyup();
});
ここでは、cssアニメーションを使用した例を示します。 javascriptより少し複雑ですが、結果は素晴らしいです。
$(function() { \t
var curVal = '';
$('#example').on("change keyup paste", function(){
\t //Check to make sure the value actually changed. Highlighting all triggers event using ctrl a
\t if ($(this).val() != curVal) {
var ele = $('.background-image'),
ele2 = $('.background-image-old');
//Remove the old Classes
ele2.removeClass('animate-background-old');
ele.removeClass('animate-background');
//Add the new backgrounds
ele2.css('backgroundImage', ele.css('backgroundImage'))
.addClass('animate-background-old');
ele.css('backgroundImage', 'url("' + $(this).val() + '")')
.addClass('animate-background');
//Hack to trigger animation
ele.replaceWith(ele);
ele2.replaceWith(ele2);
curVal = $(this).val();
}
});
});html, body {
height: 100%;
padding: 0;
margin: 0;
background-color: white;
}
.body-wrapper{
height: 100%;
position: relative;
}
.body-wrapper-content{
position: relative;
z-index: 3;
}
.background-image, .background-image-old{
height: 100%;
width: 100%;
top:0;
left:0;
content: '';
position: absolute;
bottom: 0;
display: block;
z-index: 2;
}
.background-image-old{
z-index: 1;
}
.animate-background{
animation: animate-background 2s ease-in-out;
}
.animate-background-old{
animation: animate-background 2s ease-in-out 0s 1 reverse;
}
@keyframes animate-background {
from {opacity: 0}
to {opacity: 1}
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<div class="body-wrapper">
<div class="background-image-old"></div>
<div class="background-image"></div>
<div class="body-wrapper-content">
<input type="text" id="example" name="example" />
</div>
</div>
</body>
</html>
助けてくれてありがとう、それはかなり良い変更だが、フェードアウトが全体のdivが消えます：/しかし、それは私が:) –
@JakubSzczepanikを予想以上に良い作品..はい、このコードでは、全体のdiv非表示を行います/ fadeOut ..あなたは別々に背景画像をフェードイン/フェードアウトすることはできません。必要な場合は、絶対位置でdiv内の画像を作成し、それをバックグラウンドとして動作させる必要があります。 fadeIn/fadeOutそのイメージ.. Good Luck :) –