我想要将用户单击的图像动画化到左上角 100x100,然后我希望它返回到动画开始的原始位置,但是使用这段代码,它会不断滑动一些像素到顶部,左边。我无法弄清楚是什么原因导致了这个问题。如何让它回到原来的位置?
var posLeft;
var posTop;
$(this).children("img").click(function() {
goToTopLeft($(this));
$.each($(this).parent().children("img"), function() {
$(this).css("z-index","0");
});
goToFrontFromTopLeft($(this));
$(this).css("z-index", "1");
});
function goToTopLeft(img) {
posLeft = img.position().left;
posTop = img.position().top;
img.animate({ top: '-=100', left: '-=100', height: 'toggle' }, 500);
}
function goToFrontFromTopLeft(img) {
img.animate({ top: posTop, left: posLeft, height: 'toggle' }, 500);
}
最佳答案
虽然我从与您不同的位置开始制作动画,但以下代码应该让您了解如何执行您想要执行的操作:
$('img').click(
function(){
var offset = $(this).offset();
var originLeft = offset.left;
var originTop = offset.top;
$(this).animate(
{
'top' : '400px',
'left': '200px'
}, 1500, function() {
$(this).animate({
'top': originTop,
'left' : originLeft
}, 1500)
});
});
我会注意到,在我的第一次尝试中,我自己的动画也出现了短暂的闪烁,这似乎是由于容器元素具有填充或边距,这就是 CSS 的原因该页面上的 Pane 包含以下内容:
body, div, iframe {
padding: 0;
margin: 0;
}
这似乎已经解决了短暂的“闪烁”问题,而且我怀疑,很可能会解决您自己的问题。但如果没有看到现场演示,除了猜测之外,很难知道问题是什么。如果这没有帮助,我当然建议发布 JS Fiddle ,或JS Bin 、演示,以便我们可以看到您正在使用的内容。
关于jquery - 使用 jQuery 动画回到原始位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4575526/