Question

我需要创建一个更改背景图像并为其设置动画的功能，以便在触发时为其提供炫酷的淡入效果。但是我遇到了一个奇怪的问题。因此，对于我下面的函数，它的工作原理是它在运行时更改背景图像。但它没有动画。它只是立即改变背景图像。我曾尝试使用背景，背景图像和其他方式搞乱“过渡”属性，但无济于事。有人可以帮我理解动画部分无法触发的原因吗？

function postBackgroundImage(url){
    var bg = dom.el("topLayer");
    bg.src = url;
    bg.style.backgroundImage = "url("+bg.src+")";
    bg.style.transition = "all 2s linear 1s";
}

Answer 1

您可以使用Jquery插件

http://jquery.malsup.com/cycle/

包含库

<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

使用淡入淡出效果

$('.pics').cycle({
    fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});

HTML

<div class="pics"> 
    <img src="images/beach1.jpg" width="200" height="200" /> 
    <img src="images/beach2.jpg" width="200" height="200" /> 
    <img src="images/beach3.jpg" width="200" height="200" /> 
</div>

CSS

.pics {  
    height:  232px;  
    width:   232px;  
    padding: 0;  
    margin:  0;  
} 

.pics img {  
    padding: 15px;  
    border:  1px solid #ccc;  
    background-color: #eee;  
    width:  200px; 
    height: 200px; 
    top:  0; 
    left: 0 
}

Javascript：我的函数动画不起作用？

1 个答案: