特定属性的jquery动画

Question

所以我正在使用 gRaphael 创建一些图表。这是创建一个很酷的条形图线，其中有一些点。这些点具有 ... 节点，其属性为 x=10 y=20。 示例

rect x="135.8" y="115.8" width="8.399999999999999" height="8.399999999999999" r="0" rx="0" ry="0" fill="#ff0000" stroke="none"

如果可能的话，我想使用 jquery 为这个人制作动画。问题是如果我这样做了

$("rect").click(函数({ $(this).animate({ 'x'：30 }); });

为了给 x 坐标设置动画，我猜出于明显的原因它不起作用？？呵呵。 此外，我尝试将属性 x 设置为变量并尝试对其进行动画处理，但什么也没有。任何人都可以帮助我使用 gRaphael 制作动画和 svg 吗？

这个例子有效

$("rect").live('click',function(){ $(this).attr('x',100);}); 它移动节点，但当然不会为其设置动画

谢谢！

Answer 1

我正在开发使用 svgs 的项目。当我完成上述工作时，动画值从 0 变为 where-ever，即使它在动画之前有一个值。所以我改用这个（cy 的初始值为 150）：

$('#navlet .li1').mouseenter(function(){
    $({cy:$('#nav_dot').attr('cy')})
    .animate(
    {cy: 60},
    {duration:200,step:function(now){$('#nav_dot').attr('cy', now);}});
});

Answer 2

您绝对可以通过这样做为属性设置动画

$("rect")
    .animate(
        { x: 100 },
        {
            duration: 1000,
            step: function(now) { $(this).attr("x", now); }
        });

您不需要在 CSS 中保存该属性。

Answer 3

其实有一种方法可以为特定属性设置动画：

$("rect").each(function(){
   $(this).css("MyX",$(this).attr("x"))
   .animate({MyX:500},{step:function(v1){$(this).attr("x",v1)}})
})

Answer 4

我找到了一种使用 jQuery 调用的方法，而不会遇到动画开始时属性重置为 0 的问题，就像这里的其他答案一样

假设我们想要为 id 为 image 的 img 标签元素的 width 和 height 属性设置动画。要将其从当前值设置为 300 的动画，我们可以这样做：

var animationDiv= $("<div></div>"); //we don't add this div to the DOM
var image= $("img#image");
//could use any property besides "top" and "left", but the value must be valid, that means concatenating a "px" to numerical attributes if they don't have it already (and removing them in the step callback if they do)
animationDiv.css("left", image.attr("width")); 
animationDiv.css("top", image.attr("height")); 
animationDiv.animate(
    {
        left: 300,
        top: 300
    },
    {
        duration: 2500,
        step: function(value, properties) {
            if (properties.prop == "left")
                 image.attr("width", value + "px")
            else
                 image.attr("height", value + "px")
        }
    }
)

在这种方法中，我们使用一个不在 DOM 内部的 div 并在其中设置动画值，然后我们使用 div CSS 值来为我们的元素设置动画。不是很漂亮，但可以完成工作，如果您需要停止动画，您可以在 animationDiv 上调用 .stop()。

jsfiddle

Answer 5

我和@rslm 一样，正在制作 SVG 动画，需要修改 viewBox 属性。这是我的解决方案：

（注意，我使用的是 ES6，所以你可能需要重写或使用 babel 来使代码与 ES5 兼容）

let scrollTimeOut;

/**
 * Animate the viewBox property for the logo
 * @param {object} start
 * @param {object} finish
 */
let animateLogo = (start, finish) => {
    let svg = $('.logo-container svg');

    $(start).finish().animate(finish, {duration: 400, step: (newVal, item) => {
        let split = svg.attr('viewBox').split(' ');
        let width = split[2];
        let height = split[3];


        if (item.prop === 'vbw') {
            width = newVal;
        } else {
            height = newVal;
        }


        svg.attr({viewBox: `${split[0]} ${split[1]} ${width} ${height}`})
    }});
};

/**
 * Set the height of the header
 */
let setHeaderHeight = () => {
    let split = $('.logo-container svg').attr('viewBox').split(' ');
    let finish;
    let start = {vbw: +split[2], vbh: +split[3]};

    if (window.scrollY < 50) {
        finish = {vbw: 1000, vbh: 1000};
    } else {
        finish = {vbw: 1600, vbh: 300};
    }

    if (finish.vbw !== start.vbw && finish.vbh !== start.vbh) {
        // If there is something to animate
        animateLogo(start, finish)
    }
};

$(window).off('scroll.staggered').on('scroll.staggered', () => {
    // Only do something every 50ms
    window.clearTimeout(scrollTimeOut);

    scrollTimeOut = window.setTimeout(() => {
        setHeaderHeight();
    }, 50);
});

为了完整起见，我添加了 $(window).off('scroll.staggered').... 部分，但您只需将其更改为根据需要调用 setHeaderHeight()。

Answer 6

您只能为具有数值的有效 CSS 属性设置动画。颜色可以通过一些插件进行动画处理。由于 'x' 不是一个有效的 CSS 属性，您将无法使用 jQuery 内置的 .anmiate() 函数对其进行动画处理。

我认为您几乎必须编写自己的动画函数来增加x 的值，每次通过超时。