Question

当您将鼠标悬停在段落上时，我正在使用此代码更改页面的css3背景：

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

它工作正常，但我想添加fadIn，所以它会更顺畅。此外，当你没有将鼠标悬停在段落（#web）上时，我想将新背景淡化为旧背景。

Answer 1

您可以使用jQuery animate()为css随时间变化设置动画。

<强> [编辑]

您的代码应使用以下内容：

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

来自api.jquery.com/animate的示例代码：

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

Answer 2

您可以使用jQuery和jQuery UI轻松完成此操作，并为类设置动画，而不必使用SwitchClass为各个属性设置动画。

jQuery的：

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

只需在CSS中设置oldClass和newClass的样式属性即可。（适当地重命名）

确保您正在加载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/

Answer 3

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

我认为你不能淡化背景，它下面没有任何东西。你需要一个叠加层。

Answer 4

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

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

使用jQuery淡出背景然后淡出

4 个答案: