javascript - 将CSS属性从x更改为y

这是我当前的代码：

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转换的按钮。

最佳答案

您正在执行的是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"/>

关于javascript - 将CSS属性从x更改为y，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31588416/