Öffnen Sie einen Hintergrund mit Übergang

Question

Ich entwickle Website mit wenig von Jquery, aber ... Ich habe etwas gefunden, um den Körper Hintergrund zu zeigen, wenn ein div ist Schweben. Es funktioniert perfekt. Aber es ist ohne jede Animation. Ich möchte eine kleine Fade-Animation, um die Besucher nicht zu verscheuchen. Ich habe versucht Fadein und animieren, und es funktioniert nicht ...

Dies ist der Code funktioniert perfekt. Ich weiß nicht wirklich, wie man diesen grundlegenden "erscheint" Übergang hinzufügt.

$(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', ''); 
}); 

});

Es wird helfen, ZU VERSTEHEN: http://jsfiddle.net/kGgyY/98/ Dank für das mir zu helfen, und sorry für mein Englisch.

Redbean,

Answer 1

prüfen diese Geige heraus, 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"); 
} 

Es tut was Sie wollen, außer das Hintergrundbild ist an ein div anstelle des Körpers angefügt.

EDIT: Hier ist ein anderer (http://jsfiddle.net/kGgyY/143/), dass Ihr JavaScript nicht in allen Datei ändern, habe ich nur einfach die folgende 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; 

} 

Der Hintergrund-Bild in der CSS gegeben ist nur ein leeres Bild.

Answer 2

Hallo, so habe ich ein slide toggle auf, aber es war nicht so effektiv, wie ich dachte

aber dies ist der Link http://jsfiddle.net/RachGal/up6e0w34/

Das glaube ich nicht, dass Sie langsamer als ‚langsam‘ gehen in sluttogogle, aber es ist gut für Absatz Text und Sachen

Ich denke, dass die FadeIn (die Sie sagten, Sie versuchten?) ist effektiver - vielleicht haben Sie nur nicht genug verlangsamen. Mine wird gesetzt (1 sec) bis 1000 ms, aber Sie können diese langsam nach unten weiter

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

hoffe, das hilft

Rachel

P. S. Gute Nacht!

übrigens, es ist ein ziemlich dunkles Bild; wenn man es wollte immer einen Filter anwenden könnten Sie ein wenig verblassen die Opazität wie in dieser Geige zu senken hier https://jsfiddle.net/RachGal/torunyx5/1/

Dies ist die Fade-In-Schnipsel

$("#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>