随着时间的推移将 css 属性从 x 更改为 y

Question

这是我当前的代码：

jQuery(function(){
    $(document).ready(function(){
        $('#cont').click(function(e){    
            $('#splashText').fadeOut(300, function(){
                $('#bgImage').animate('filter: blur(0px)', 300);
            });
        });
    });
})

我试图让#splashText 淡出（效果很好），同时#bgImage 使用jQuery 将其模糊（通过filter: blur(5px); 设置）从5px 更改为0px。另外，#cont 是一个按钮，应该触发 onclick 转换。

Answer 1

你正在做的是passing a callback to fadeOut，这意味着animate函数将在fadeOut完成执行后被调用。试试这个：

$('#cont').click(function(e){    
    $('#splashText').fadeOut(300);
    $('#bgImage').animate(...);  // Do you animation here
});

另外，您使用的 animate() 函数有误。 This is a good explanation on how you use blur filter in jquery animate。相关代码：

$('#bgImage').animate({blurRadius: 10}, {
    duration: 500,
    easing: 'swing', // or "linear"
                     // use jQuery UI or Easing plugin for more options
    step: function() {
        $('#bgImage').css({
            "-webkit-filter": "blur("+this.blurRadius+"px)",
            "filter": "blur("+this.blurRadius+"px)"
        });
    }
});

$(function() {
  $('#cont').click(function(e) {
    $('#splashText').fadeOut(600);
    $('#bgImage').animate({
      blurRadius: 5
    }, {
      duration: 600,
      easing: 'linear',
      // use jQuery UI or Easing plugin for more options
      step: function() {
        this.blurRadius = 5 - this.blurRadius;
        console.log(this.blurRadius);
        $('#bgImage').css({
          "-webkit-filter": "blur(" + this.blurRadius + "px)",
          "filter": "blur(" + this.blurRadius + "px)"
        });
      }
    });
  });

});

#bgImage {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    z-index:-1;
}
#cont {
    margin-left:200px;
}
* {
    position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<button id="cont">Click</button>

<h1 id="splashText">Splash</h1>

<img src="http://placehold.it/200x200" id="bgImage"/>