javascript - 延迟和动画背景

Question

我想让背景图像消失。有用。但是当我尝试延迟它或为其设置动画时它会失败。猜猜它出了什么问题以及如何做好？

$(function(){      
    $("#foto1").click(function() {
        $("#foto1").delay(1000).animate.css({"background":"none"},2000);
    }); 
})

http://jsfiddle.net/78W3u/

Answer 1

像这样试过

$(document).ready(function(){  
   $("#foto1").click(function() {
       $(this).delay(1000).fadeOut(20000, function(){
        $("#foto1").css('background', 'none')   //<=== this remove the background after the animation stops
       });
    });    
})​

http://jsfiddle.net/78W3u/5/

Answer 2

这将淡出图像：http: //jsfiddle.net/2MQeC/

$(function(){      
    $("#foto1").click(function() {
        $("#foto1").fadeOut(2000);
    }); 
})​

- 编辑 -

这将独立于图像为背景设置动画：http: //jsfiddle.net/2MQeC/1/

#foto1 { 
    background: black; 
  -webkit-transition: background 1.5s ease;  /* Saf3.2+, Chrome */
     -moz-transition: background 1.5s ease;  /* FF4+ */
      -ms-transition: background 1.5s ease;  /* IE10 */
       -o-transition: background 1.5s ease;  /* Opera 10.5+ */
          transition: background 1.5s ease;
}

​</p>

$(function(){      
    $("#foto1").click(function(){
        $this = $(this);
        setTimeout(function(){
            $this.css({
                background: 'green'
            });
        }, 1000); // delay
    }); 
})​;

如您所见，这依赖于CSS3 过渡来实现背景动画。

更好的跨浏览器解决方案是使用 jQuery.animate()函数。但是您不能修改尽可能多的属性.css()。

.animate() 从 jQuery文档中提取：

大多数非数字属性无法使用基本的 jQuery 功能进行动画处理（例如，宽度、高度或左侧可以进行动画处理，但背景颜色不能进行动画处理，除非使用 jQuery.Color()插件）。

但是，您可以更改标记并将图像和背景分隔在两个叠加的 div 中。这可以简化您尝试做的事情。