特定屬性的jQuery動畫

所以我使用gRaphael來創建一些圖表。這是創建一個很酷的條形圖線，其中有一些點。這些點具有以x = 10 y = 20作爲其屬性的...節點。實施例特定屬性的jQuery動畫

RECT X = 「135.8」 Y = 「115.8」寬度= 「8.399999999999999」 HEIGHT = 「8.399999999999999」 R = 「0」 RX = 「0」 RY = 「0」填充= 「＃FF0000」行程= 「none」

如果可能，我想用jquery來給這個人設置動畫。事情是，如果我做

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

爲了動畫的x coordenate它不起作用的顯而易見的理由我猜？呵呵。另外我已經嘗試將屬性x設置爲一個變量，並嘗試動畫和沒有。任何人都可以用gRaphael幫助我動畫和svg嗎？

例如，這工作

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

它移動節點，但ofcourse沒有設置動畫

謝謝！

來源

2011-07-12 climboid

試'「左」：「30px'' – Dutchie432

@climbold最好這個問題的答案是jsgoupil的答案，你應該接受它。 – Hoffmann

你絕對可以這樣做動畫屬性

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

你並不需要保存的CSS屬性。

來源

2013-04-30 17:38:18 jsgoupil

之前沒有看到過這個語法儘管最初有'.attr（'x'）'這似乎總是從零開始。我沒有看到一個'init'（或類似的）選項發送...有什麼可以說'x'應該從50開始並且動畫到100？ – Langdon

@Langdon，rslm在 –

下提供了一個解決方案@Langdon檢查我的答案 – Hoffmann

-1

您只能對包含數值的有效CSS屬性設置動畫。顏色可以通過一些插件進行動畫。由於'x'不是有效的CSS屬性，因此您將無法使用內置的.anmiate（）函數中的jQuery創建動畫效果。

我覺得你必須要編寫你自己的動畫函數來增加每個傳遞超時的值x。

來源

2011-07-12 21:07:29 idrumgood

gotcha。我會嘗試查看是否可以根據需要擴展gRaphael插件。非常感謝你的幫助！ – climboid

事實上，有動畫的特定屬性的方法：

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

來源

2013-01-29 10:14:02 Porizm

這很酷。在 – climboid

我正在使用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);}}); 
});

來源

2013-07-24 12:26:44 rslm

我找到了一種方法使用jQuery的呼叫而不運行到該屬性被重置爲0問題時的動畫效果開始像一些其他的答案這裏

可以說我們想動畫img標籤元素的width和height屬性，其ID爲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值動畫我們元件。不是很漂亮，但完成工作，如果你需要停止動畫，你可以在animationDiv上調用.stop()。

jsfiddle

來源

2014-12-31 10:31:24 Hoffmann

特定屬性的jQuery動畫

回答

相關問題