自定义值的jQuery动画（不是CSS属性）

我想做最奇怪的事情：使用animate进行值更改，这不是一个css属性，而只是一个变量。自定义值的jQuery动画（不是CSS属性）

我需要这个，因为我想旋转一个元素，当用户点击其边框。所以我需要动画角度值，然后在自定义绘图算法中使用它。

我试图使用隐藏的DIV的css属性来存储它的角度值并为其设置动画效果，但它无法正常工作。

任何人都可以帮我吗？

2011-11-16 Epsiloncool

根据JQuery的动画DOC http://api.jquery.com/ animate /：“除了样式属性外，还可以设置一些非样式属性，例如scrollTop和scrollLeft以及自定义属性。” – mjhm

只是偶然发现了这一点的同时寻找同样的事情，正确的答案似乎是

$({foo:0}).animate({foo:100}, { 
    step: function(val) { 
     // val takes values from 0 to 100 here 
    } 
})

上找到http://james.padolsey.com/javascript/fun-with-jquerys-animate/

来源

2013-05-31 12:57:56 georg

这就是我一直在寻找的。我不希望更改任何DOM元素的属性，样式或JavaScript属性。 – funrob

请注意，起始值必须为零。因此，假定结束值为“1”并进行自己的进度计算可能更容易：val = start_val *（1-val）+ end_val * val; –

这是一个很好的学习技巧。 +1这应该是答案 –

-3

jQuery有一些所谓的有史以来之后激发的动画更换step function，

$('li').animate({ 
    opacity: .5, 
    height: '50%' 
}, 
{ 
    step: function(now, fx) { 
    var data = fx.elem.id + ' ' + fx.prop + ': ' + now; 
    $('body').append('<div>' + data + '</div>'); 
    } 
});

来源

2011-11-16 15:28:38 Andrew

在我看来，这并不回答原来的海报问题。我发现这个页面想要做原始的海报想要做的事情（使用放松动画而不是CSS属性），这并不能回答这个问题。 – Flipster

这不具体动画*非属性*。 @ thg435的答案是正确的。 – Ciantic

@georg的答案回答了这个问题 –

如果您正在寻找“旋转”的东西，你可以do that with css，因此，你可以使用jQuery animate function。

来源

2011-11-16 15:48:16 Spycho

令人烦恼的是，如果不实际提供一些CSS属性来处理它（它不会给你中间的值），就不可能运行animate函数。

你并不需要甚至有动画的实际元素（或变量）的工作，你想改变，因此有可能破解它使用step参数由@Andrew像这样描述的工作：

$('<div/>').css({ height: _your_start_value }).animate({ 
    height: _your_end_value 
}, { 
    step: function (currentValue) { 
     //do what you need to with the current value.. 
    } 
});

但是，这是非常低效的，因为它正在不必要地改变（虽然未附加）元素的高度CSS属性。最好使用“补间”库（如Tween JS）来做这种事情。

来源

2013-04-18 15:20:31

自定义值的jQuery动画（不是CSS属性）

回答

相关问题