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()プラグインを使用しない限り、背景色はアニメーション化できません)。

ただし、マークアップを変更して、画像と背景を重ね合わせた 2 つの div に分けることができます。これにより、やろうとしていることを簡素化できます。