延迟并设置背景动画

Delay and animate background

本文关键字：动画 背景 设置 延迟      更新时间：2023-09-26

我想让背景图像消失。它有效。但当我试图延迟它或设置它的动画时，它失败了。你猜怎么了？怎么做好？

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

http://jsfiddle.net/78W3u/

像这样尝试

$(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/

这将淡出图像：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;
}

​

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

正如您所看到的，这依赖于背景动画的CSS3转换。

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

jQuery .animate()文档摘录：

大多数非数字属性不能使用基本属性设置动画jQuery功能（例如，width、height或left可以是动画，但背景颜色不能，除非使用jQuery.Color（）插件）。

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

相关文章：