动画步骤和事件数据

时间:2015-01-25 18:07:53

标签: javascript jquery function jquery-animate

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

正文中的一些代码:

<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/

1 个答案:

答案 0 :(得分:0)

我的坏,它确实有效。我学到了新的东西。 我认为我的旧解决方案很好:

$(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)"
   });
};

它就像一个魅力。