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