jquery：我可以动画位置：绝对位置：相对？

我有一堆绝对定位的图像，我希望能够点击一个按钮，并让它们全部动画到它们通常在页面上的位置（如果它们具有相对位置）。jquery：我可以动画位置：绝对位置：相对？

所以它甚至可以从position：absolute到position：jquery中的相对位置进行动画处理？

这是我有：

$(".change_layout").click(function(){ 

    $(".book_img").animate({position:'relative', top:'0px', left:'0px'}, 1000) 

})

来源

2010-02-04 ExodusNicholas

你确定你的意思是'relative'而不是'static'吗？由于'静态'是'默认'的位置。 – 2010-02-04 20:10:13

是的，静态就是我的意思。 – ExodusNicholas 2010-02-04 20:10:48

不，你不能直接为它设置动画，但你可以找出终点并在那里设置动画位置。像这样的东西可能会奏效，当动画到static位置：

$('img.foo').each(function() { 

    var el = $(this); 

    // Make it static 
    el.css({ 
     visibility: 'hidden', // Hide it so the position change isn't visible 
     position: 'static' 
    }); 

    // Get the static position 
    var end = el.position(); 

    // Turn it back to absolute 
    el.css({ 
     visibility: 'visible', // Show it 
     position: 'absolute' 
    }).animate({ // Animate to the static position 
     top: end.top, 
     left: end.left 
    }, function() { // Make it static 
     $(this).css('position', 'static'); 
    }); 
});

这是一个有点哈克，但它应该工作。

来源

2010-02-04 20:13:24

你应该调用'position（）'，而不是'offset（）'。 – SLaks 2010-02-04 20:17:54

啊你真是太棒了。唯一的问题是所有的图像（它们遍布在页面上）与第一个图像的位置一致，然后它们立即出现在它们的静态位置，但是每个图像不会动画到它自己的静态位置。任何线索如何解决这个问题？ – ExodusNicholas 2010-02-04 20:32:59

做一个'each'循环来处理每个图像。你现在可能选择了一个声明中的所有元素（你的'var el'就像'$（'img.foo'）'，这使得所有的操作都相对于第一个图像。 – 2010-02-04 21:27:25

我不认为你可以做到这一点。 jQuery animate只适用于任何“数字CSS属性”。

来源

2010-02-04 20:02:07 rosscj2533

不是真的......你也可以改变文字或背景的颜色。 :) – 2010-02-04 20:06:36

但不是颜色的数值？ – ExodusNicholas 2010-02-04 20:09:32

@TiuTalk - 好点，但我认为ExodusNicholas是正确的，在这种情况下，jQuery将使用颜色的数字方面来为其设置动画，根据需要递增/递减RGB值以移动颜色。 – rosscj2533 2010-02-04 20:44:47

号

但是，你可以检查元素的当前位置（称之为.position()），设置position到relative，并从原来的位置，以当前的动画。

来源

2010-02-04 20:03:06 SLaks

我不知道我会如何去做这件事，有没有机会帮助我开始？我想要做的是为人们提供2种不同的视图，每篇文章都有一个图像，我希望这些图像能够在按下第二个视图按钮时动画它们的位置，然后当第一个视图按钮被按下时，让他们回到第一个位置。 – ExodusNicholas 2010-02-04 20:08:26

有关示例，请参阅Tatu Ulmanen的答案，这正是我所描述的。 – SLaks 2010-02-04 20:15:11

我喜欢大肚的解决方案，但发现这个可重用的代码是我的目的，更好：

function specialSlide(el, properties, options){ 
    //http://stackoverflow.com/a/2202831/ 
    el.css({ 
     visibility: 'hidden', // Hide it so the position change isn't visible 
     position: 'static' 
    }); 
    var origPos = el.position(); 
    el.css({ 
     visibility: 'visible', // Unhide it (now that position is 'absolute') 
     position: 'absolute', 
     top: origPos.top, 
     left: origPos.left 
    }).animate(properties, options); 
}

比方说，我想$（“＃elementToMove”）滑动到新的位置，我希望它移动1000毫秒。我可以这样称呼：

var props = {'top' : 200, 'left' : 300}; 
var options = {'duration': 1000}; 
specialSlide($('#elementToMove'), props, options);

来源

2013-01-17 20:52:08 Ryan

jquery：我可以动画位置：绝对位置：相对？

回答

相关问题