jquery-анимация определенных атрибутов

Вы определенно можете оживить свойство, сделав это

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

Вам не нужно сохранять это свойство в CSS.

Я работаю над проектом, который использует 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);}});
});

Фактически, есть способ оживить определенный атрибут:

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

Я нашел способ использовать вызов jQuery, не сталкиваясь с проблемой, что атрибут сбрасывается до 0 при запуске анимации, как и некоторые другие ответы здесь

Допустим, мы хотим анимировать атрибуты width и height элемента тега img с идентификатором image. Чтобы оживить его от текущего значения до 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")
        }
    }
)

В этом подходе мы используем div, который не находится внутри DOM, и анимируем в нем значения, затем мы используем значения div CSS для анимации нашего элемента. Не очень красиво, но выполняет свою работу. Если вам нужно остановить анимацию, вы можете вызвать .stop() для animationDiv.

jsfiddle

Я, как и @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() по мере необходимости.

Вы можете анимировать только те свойства CSS, которые имеют числовое значение. Цвета можно анимировать с помощью некоторых плагинов. Поскольку 'x' не является допустимым свойством CSS, вы не сможете анимировать его с помощью встроенной в jQuery функции .anmiate ().

Я думаю, вам придется написать свою собственную функцию анимации, чтобы увеличивать значение x при каждом проходе тайм-аута.