动画步骤和事件数据

Question

我刚刚写了一些代码来帮助你理解我的误解...

正文部分代码：

<div id="jeden">
   <p>Jeden.</p>
</div>

<div id="dwa">
   <p>Dwa.</p>
</div>

还有一些 jquery 代码：

function blurRad(e) {
   $(this).css({
      "-webkit-filter": "blur(" + e.data.blurRad + "px)",
      "filter": "blur(" + e.data.blurRad + "px)",
      "-moz-filter": "blur(" + e.data.blurRad + "px)",
      "-o-filter": "blur(" + e.data.blurRad + "px)",
      "-ms-filter": "blur(" + e.data.blurRad + "px)"
   });
};

function nowa(e) {
   $(this).before(e.data.nowa);
};

$(document).ready(function () {
   $('#dwa').click({nowa: "k"}, nowa);
   $('#jeden').animate({blurRad: 10}, {duration: 2000, step: blurRad}); 
});

现在我有一个问题；为什么代码包含在：

   $('#dwa').click({nowa: "k"}, nowa);

有效，以及为什么代码包含在：

   $('#jeden').animate({blurRad: 10}, {duration: 2000, step: blurRad});

不想工作？

jsfiddle 上的相同代码：http://jsfiddle.net/g57nkbg2/

Answer 1

糟糕，它确实有效。我学到了新东西。我认为我的旧解决方案很好：

$(document).ready(function () {
    $('#dwa').click({nowa: "k"}, nowa);
    $('#jeden').css({
        "filter": "blur(10px)",
        "transition": "2s"
    });
});

但您的代码中的错误不在于此。您应该将 blurRad 函数更改为：

function blurRad(e) {
   $(this).css({
      "-webkit-filter": "blur(" + e + "px)",
      "filter": "blur(" + e + "px)",
      "-moz-filter": "blur(" + e + "px)",
      "-o-filter": "blur(" + e + "px)",
      "-ms-filter": "blur(" + e + "px)"
   });
};

它就像一个魅力。

动画步骤和事件数据

Animation steps and event data

javascript

jquery

function

jquery-animate