JQuery анимация определенных атрибутов - PullRequest
Новая
       15

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

7 голосов
/ 13 июля 2011

Так что я использую 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(function({
 $(this).animate({
   'x':30
 });
});

Чтобы оживить координату x, она не работает по понятным причинам, я думаю ?? хе-хе. Также я попытался установить атрибут x в переменную и пытался анимировать это и ничего. Может ли кто-нибудь помочь мне с анимацией и SVG с gRaphael?

Это, например, работает 

$("rect").live('click',function(){  $(this).attr('x',100);});
перемещает узел, но, конечно, не оживляет его

Спасибо!

Ответы [ 5 ]

9 голосов
/ 30 апреля 2013

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

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

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

8 голосов
/ 24 июля 2013

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

На самом деле есть способ анимировать определенный атрибут: 

$("rect").each(function(){
   $(this).css("MyX",$(this).attr("x"))
   .animate({MyX:500},{step:function(v1){$(this).attr("x",v1)}})
})
2 голосов
/ 31 декабря 2014

Я нашел способ использовать вызов 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

0 голосов
/ 13 июля 2011

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

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

...