jQuery animate <object> tag

问题

I have an <object> with an id of 'objectID'.

I can modify its position with .css:

$('#objectID').css({'top': "+=200px"});

But when I use .animate it won't work:

$('#objectID').animate({'top': "+=100px"}, 1000);

or

$('#objectID').animate({top: "10"}, slow);

Or any other variation, which works on divs. Is there a limitation to animating object elements?

回答1:

Since the <object> tag is not supported you can hack out your own animation like this:

var obj = $('#objectID');
var speed = 50;
var distance = 100;

var i = setInterval(function() {
    obj.css({'top': '+=1px' });
    if (parseInt(obj.css('top')) > distance) {
        clearInterval(i);
    }
}, speed);

Change the speed variable to get the animation speed you need.

Here's the jsfiddle.

回答2:

In order to animate with top your element needs position, eg position:relative or position:absolute.

回答3:

$('#objectID').animate({'top': "+=100px"}, 1000); The quotes are not needed around top.

$('#objectID').animate({top: "10"}, slow); The integer should not be surrounded by quotes and slow should be surrounded by quotes.

That should fix your problem.

回答4:

Have you included the appropriate css for this object?

​#objectID{
  position: absolute;
  top: 0px;
  ...
}​

Indeed I believe Object may not be supported for animate(). I was able to use .css in a jsfiddle.

Should be able to use .css() though: http://jsfiddle.net/mkprogramming/bw9Kb/15/

来源：https://stackoverflow.com/questions/10398888/jquery-animate-object-tag