Question

我正在使用此代码。当它改变图像时，图像淡出然后另一个图像淡入，同时我可以看到背景颜色，我不想看到。是否有任何简单的方法来淡化图像，但同时淡入下一个图像，或另一种jQuery效果，如滑动图像？我只是不想看到背景颜色。

<script type="text/javascript">
$(document).ready(function(){
    var imgArr = new Array( // relative paths of images
        'css/images/main_img.jpg',
        'css/images/main_img_2.jpg',
        'css/images/main_img_3.jpg',
        'css/images/main_img_4.jpg',
        'css/images/main_img_5.jpg'
    );

    var preloadArr = new Array();
    var i;

    /* preload images */
    for(i = 0; i < imgArr.length; i++){
        preloadArr[i] = new Image();
        preloadArr[i].src = imgArr[i];
    }

    var currImg = 1;
    var intID = setInterval(changeImg, 6000);
    //added this so that the first image is always the first from the array
    $('#main_content').css('background','url(' + preloadArr[0].src +') top center no-repeat');
    /* Main IMG */
    function changeImg(){
        $('#main_content').animate({opacity: 0}, 1000, function(){
            $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') top center no-repeat');
        }).animate({opacity: 1}, 1000);
    }
});
</script>

Answer 1

仅使用一个元素无法实现此效果。你需要在另一个元素之上放置第二个元素并将其淡入。一旦它消失，你可以隐藏背面元素，但它甚至不需要。

请参阅此tutotrial：http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/

Answer 2

由于您要更改css背景，因此无法针对单个元素执行此操作。

你可以用另一个div来实现这个目的，它可以保存下一个背景图像（在你的内容淡出之前），并且可以使用无静态css位置状态和z-index属性放在你的#main_content元素下。

Answer 3

这里我编写了使用Jquery创建简单的JavaScript淡入淡出效果动画的代码，它可以帮助您创建出色的图像动画。

首先添加以下脚本以导入jquery.min.js，或者您可以自己托管此脚本。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

这里写

的CSS代码

.fade和.fade img

.fade 
{ 
box-shadow:1px 1px 5px 2px #6DC83C; 
position:relative; 
width:500px; 
height: 300px; 
border-radius:19px; 
} 

.fade img 
{ 
border-radius:19px; 
position:absolute; 
left:0;
top:0; 
}

并使用以下代码。

<script> $(function(){ $('.fade img:gt(0)').hide(); setInterval(function(){$('.fade    :first-child').fadeOut(3000).next('img').fadeIn(3000).end().appendTo('.fade');}, 4000); });    </script>

然后使用以下代码进行图像处理。

<div class="fade"> 
<img src="image_1.gif"> 
<img src="image_2.gif"> 
<img src="image_3.gif"> 
</div>

jQuery图像淡入淡出效果

3 个答案: