通过转换

Question

我正在开发一些Jquery的网站，但...... 当div悬停时，我发现了一些显示身体背景的东西。它工作得很好。但它没有任何动画。我想要一点点淡化动画，不要吓跑游客。我尝试过Fadein和animate，它不起作用......

这是完美的代码。 我真的不知道如何添加这种基本的“显示”转换。

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

}）;

有助于理解：http://jsfiddle.net/kGgyY/98/ 谢谢你的帮助，对不起我的英语。

红豆，

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而不是身体之外，它可以做你想要的。

编辑：这是另一个（http://jsfiddle.net/kGgyY/143/）根本没有改变你的javascript文件，我只是添加了以下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中，但它适用于段落文本和内容

我认为fadeIn（你说你试过吗？）更有效 - 也许你只是没有放慢速度。我的设置为1000毫秒（1秒），但你可以进一步降低速度

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

希望这有帮助

Rachel

P.S。 Bonne nuit！

顺便说一下，这是一个非常黑暗的形象;如果你想淡出一点，你可以随时应用一个过滤器来降低不透明度，就像这里的小提琴一样https://jsfiddle.net/RachGal/torunyx5/1/

这是淡入代码段

＆＃13;

＆＃13;

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

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;