2

嘿伙计们，我试图在 Jquery 中使用 .css 更改背景图像时添加淡入淡出效果 我对 java 不太了解，希望有人能在这里帮助我！

更改 CSS 背景图像的代码在这里非常简单：

$(document).ready(function(){
$("#button01").click(function () {
      $("#content_wrapper").css({backgroundImage : 'url(image/staff/shinji.jpg)' } );
        });
    });

它就像一个图片库，我只是在 css 背景图片中显示它一切正常，但我想知道是否可以添加淡入淡出或淡入淡出效果。

4

2 回答 2

1

您不能将一张图像淡入另一张图像，只能使用纯背景色等属性。

您可以做的是淡化包含图像的元素的不透明度。

使用这种方法，为了达到您想要的效果，您必须做的是让 2 个图像一个在另一个之上。

然后你可以淡出一个而淡入另一个。

所以像：

// write a little function to do a toggling fade
jQuery.fn.fadeToggle = function(speed, easing, callback) { 
   return this.animate({opacity: 'toggle'}, speed, easing, callback); 
};

// make sure one layer is marked as active and shown and the other is hidden
$("#layer1").show();
$("#layer2").addClass('inactive').hide();

// then you can do this:
$("#button01").click(function () {
    $("#layer1").fadeToggle('slow').toggleClass('inactive');
    $("#layer2").fadeToggle('slow').toggleClass('inactive');
    // then set the new background image for the hidden layer
    $(".inactive").css({backgroundImage : 'url(image/staff/shinji.jpg)' } );
};

可能不是一个很好的方式，但我认为它应该工作。

于 2011-02-20T21:04:44.710 回答
0

对于淡入淡出效果，您需要同时让两个图像在某种程度上可见。我建议你使用 2 层。底部将始终包含您要淡出的图像。顶部的图层将包含将变为透明的图像。

您将无法在您的容器中包含任何具有渐变背景的内容，否则渐变效果也会影响内容。

然后使用带有效果的jQuery，执行以下操作：

$('#element').fadeOut('slow', function() {
    // Animation complete.
});
于 2011-02-20T21:10:35.623 回答