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;
}

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

如您所见，这依赖CSS3 transitions作为背景动画。

更好的跨浏览器解决方案是使用jQuery .animate()函数。但是您无法修改.css()可以包含的任何属性。

摘自jQuery .animate() documentation：

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

但是，您可以更改标记，并将图像和背景分成两个叠加的div。这可以简化你想要做的事情。

延迟和动画背景

2 个答案: