特定属性的jquery动画

Question

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

矩形 x =“135.8”y =“115.8”宽度=“8.399999999999999”高度=“8.399999999999999”r =“0”rx =“0”ry =“0”填充=“#ff0000”笔画=“无”

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

$("rect").click(function({
 $(this).animate({
   'x':30
 });
});

为了使 x 坐标具有动画效果，我猜它会因为明显的原因而不起作用？呵呵。 我还尝试将属性 x 设置为变量并尝试为其设置动画，但什么也没有。谁能帮我用 gRaphael 制作动画和 svg？

例如，这有效

$("rect").live('click',function(){  $(this).attr('x',100);});

it moves the node but ofcourse doesn't animate it

谢谢！

Answer 1

我正在开发使用 svgs 的项目。当我完成上述工作时，动画值从 0 变为任何位置，即使它在动画之前有一个值。所以我用这个来代替（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 的问题，就像这里的其他一些答案

假设我们想要对 width 和 height 进行动画处理id 为 image 的 img 标签元素的 属性。要将其从当前值动画到 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 值。