jquery animate cho thuộc tính phần tử không phải kiểu

Question

Hàm ASAIK jquery animate chỉ chấp nhận thuộc tính kiểu. nhưng tôi muốn làm động các thuộc tính của một phần tử. xem xét một hình chữ nhật tố SVG

<svg> 
<rect id="rect1" x=10 y=20 width="100px" height="100px"> 
</svg> 

tôi muốn animate yếu tố thuộc tính hình chữ nhật "x" và một cái gì đó "y" như dưới đây

$("#rect1").animate({ 
    x: 30, 
    y: 40 
    }, 1500); 

nhưng nó không phải là cách chính xác bởi vì chức năng Animate ảnh hưởng đến phong cách không thuộc tính của một phần tử.

tôi biết rất nhiều plugin tùy chỉnh có ở đây như raphel.js.

http://raphaeljs.com/

nhưng tôi không muốn sử dụng plugin để làm việc này tùy chỉnh. tôi muốn làm điều này đơn giản trong hàm jquery.animate.

là điều này có thể?

Cảm ơn,

Siva

Answer 1

tôi sẽ cố gắng một cái gì đó như thế này

<svg> 
    <rect class="myElement" id="rect1" x="10" y="20" width="100px" height="100px"> 
</svg> 

trong kịch bản:

var myElemX = $('.myElement').attr('x'); 
var myElemY = $('.myElement').attr('y'); 
$("#rect1").animate({ 
    left: myElemX+'px', 
    top: myElemY+'px' 
}, 1500); 

Answer 2

chỉ động theo cách cũ thời:

bạn có thể gọi animate theo kiểu jquery như thời trang.

http://jsfiddle.net/wVv9P/7/

function animate($el, attrs, speed) { 

    // duration in ms 
    speed = speed || 400; 

    var start = {}, // object to store initial state of attributes 
     timeout = 20, // interval between rendering loop in ms 
     steps = Math.floor(speed/timeout), // number of cycles required 
     cycles = steps; // counter for cycles left 

    // populate the object with the initial state 
    $.each(attrs, function(k,v) { 
     start[k] = $el.attr(k); 
    }); 

    (function loop() { 
     $.each(attrs, function(k,v) { // cycle each attribute 
      var pst = (v - start[k])/steps; // how much to add at each step 
      $el.attr(k, function(i, old) { 
       return +old + pst; // add value do the old one 
      }); 
     }); 

     if (--cycles) // call the loop if counter is not exhausted 
      setTimeout(loop, timeout); 
     else // otherwise set final state to avoid floating point values 
      $el.attr(attrs); 

    })(); // start the loop 
} 

$('button').on('click', function() {  
    animate(
     $('#rect1'), // target jQuery element 
     { x:100, y:300, width:50, height:100 }, // target attributes 
     2000 // optional duration in ms, defaults to 400 
    ); 
}); 

Answer 3

này may phù hợp với bạn đơn giản

$("your div id").css("position", "absolute").animate({ 
    left: 159, 
    top: 430 
}); 

Answer 4

Được rồi tất cả những câu trả lời ở đây là một trong hai đặc trưng cho SVG hoặc reimplement các .animate() jQuery cuộc gọi, tôi tìm thấy một cách để sử dụng Cuộc gọi jQuery mà không gặp phải sự cố thuộc tính được đặt lại về 0 khi hoạt ảnh bắt đầu:

Cho phép nói rằng chúng tôi muốn tạo ảnh động width và height thuộc tính của phần tử thẻ img có id image. Để animate nó từ giá trị hiện tại của nó đến 300 chúng ta có thể làm điều này:

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") 
     } 
    } 
) 

Trong phương pháp này chúng tôi sử dụng một div đó không phải là bên trong DOM và animate giá trị trong nó, chúng ta sau đó sử dụng các giá trị div CSS để animate của chúng tôi thành phần. Không phải là rất đẹp nhưng được công việc làm, nếu bạn cần phải ngừng các hình ảnh động bạn có thể gọi .stop() trên animationDiv.

jsfiddle

Answer 5

Tôi thích cách tiếp cận Hoffmann, nhưng tôi nghĩ là tao nhã hơn mà không cần tạo một đối tượng dom ảo.

Đây là coffeescript tôi đoạn mã

$rects.each -> 
    that = @ 
    $({width: 0}).animate 
    width: parseInt($(@).attr('width')) 
    , 
    duration: 2000 
    easing: 'easeIn' 
    step: -> 
    $(that).attr 'width', Math.round(@.width) 
    done: -> 
    console.log 'Done' 

mà biên dịch vào

return $rects.each(function() { 
    var that; 
    that = this; 
    return $({ 
    width: 0 
    }).animate({ 
    width: parseInt($(this).attr('width')) 
    }, { 
    duration: 1000, 
    easing: 'easeIn', 
    step: function() { 
     return $(that).attr('width', Math.round(this.width)); 
    }, 
    done: function() { 
     return console.log('Done'); 
    } 
    }); 
});