淡入背景与jQuery上悬停，然后淡出

我目前使用此代码来改变我的页面的CSS3背景，当你将鼠标悬停在一个段落：淡入背景与jQuery上悬停，然后淡出

$(function(){ 
    $('#web').hover(function(){ 
      $('html').css('background', '#000 url("space-image.png") center center fixed no-repeat'); 
    }); 
});

它工作正常，但我想fadIn增加它会更平滑。另外，如果您没有将鼠标悬停在段落（#web）上，我想淡出新的背景。

来源

2011-08-12 Connor

您可以轻松地使用jQuery和jQuery UI实现这一目标并使用制作动画，而不必使用制作动画。

的jQuery：

$(document).ready(function(){ 
    $("#f1_container").hover(function(){ 
     $("body").switchClass('load', 'webbg', 100); 
    }, 
    function(){ 
     $("body").switchClass('webbg', 'load', 100); 
    }); 
});

只需设置为oldClass和的NewClass的样式属性在你的CSS。（重命名适当）

确保您加载了jQuery UI库：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>

工作例如：http://jsfiddle.net/yPBVs/

来源

2011-08-12 16:15:52 RobB

看起来像是在线演示的完美解决方案，但不适用于我的网页。我真的很困惑... – Connor

你是否也包括jQuery UI框架？ – RobB

我不这么认为......这是我加载的内容： – Connor

您可以使用jQueryanimate()来随着时间的推移动画CSS变化。

[编辑]

您的代码应该使用这样的：从api.jquery.com/animate

$(function() { 
    $('#web').hover(function() { 
     $('html').animate({ 
      background: #000 url("space-image.png") center center fixed no-repeat 
     }, 5000, 
     function() { 
      // Animation complete. 
     }); 
    }); 
});

示例代码：

$('#clickme').click(function() { 
    $('#book').animate({ 
    opacity: 0.25, 
    left: '+=50', 
    height: 'toggle' 
    }, 5000, function() { 
    // Animation complete. 
    }); 
});

来源

2011-08-12 16:03:29

你可以添加到我的代码？我是新来的jQuery，我不知道你的意思是... – Connor

我刚才试过这个代码，它不会改变背景......我需要加载另一个jQuery文件 – Connor

你应该只需要'<脚本src =“@ Url.Content（”〜/ Scripts/jquery-1.5.1.min.js“）”type =“text/javascript”>'不管你使用的是什么版本的jQuery。 –

$('#web').hover( 
    function() { $("#myOverlay").fadeIn(); }, 
    function() { $("#myOverlay").fadeOut(); } 
});

我不认为你可以淡出的背景下，它下面没有任何东西。您需要覆盖。

来源

2011-08-12 16:27:44

这是如此可怕，它得到downvote ?? –

嘿，小提琴很酷！这是我正在谈论的。 http://jsfiddle.net/yPBVs/18/ –

@robB我可以知道为什么downvote？（猜测，siaiw）我可以猜想我的风格不是超级的，甚至有点模糊，就像我的意思是'覆盖'，我避免使用jQuery UI，但是再一次，上面的答案都没有实际的工作，他们不要在后台淡出图像。如果你用一个绝对位置的div来代替它，并且用任何你想要的方法淡入淡出，那么它就可以工作，并且交付OP所要求的。 Ciao，bb –

<script> 
$(document).ready(function(){ 
$("#f1_container").hover(function(){ 
$("body").switchClass('load', 'webbg', 950); 
}, 
function(){ 
$("body").switchClass('webbg', 'load', 950); 
}); 
}); 
</script> 
<script> 
$(document).ready(function(){ 
$("#f1_container2").hover(function(){ 
$("body").switchClass('load', 'photobg', 950); 
}, 
function(){ 
$("body").switchClass('photobg', 'load', 950); 
}); 
}); 
</script>

这是我将要使用的解决方案。谢谢您的帮助。

来源

2011-08-13 00:02:10 Connor

淡入背景与jQuery上悬停，然后淡出

回答

相关问题