jquery - jQueryアニメーション

Question

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?

score 3 · Accepted Answer

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.

score 0 · Accepted Answer

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/

score 0 · Accepted Answer

$('#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.

score 0 · Accepted Answer

上でアニメーション化するには、要素に位置が必要です。たとえば、position:relative または position:absolute です。

4 に答える 4

Related

Reference