[英]Animate element to a fixed position from anywhere with jQuery
After searching and trying for a long time I can't seem to find a solution for this just yet. 经过长时间的搜索和尝试之后,我似乎仍无法找到解决方案。 What I am trying to do is animate an arrow to go to a specific location above the button that is clicked. 我想做的是为箭头设置动画,使其移动到所单击按钮上方的特定位置。 There are 3 buttons (let's call them A, B and C), if A is clicked the arrow will go there and when C is clicked the arrow will go from A to C or when B is clicked, it will go from A to B. 有3个按钮(我们将其称为A,B和C),如果单击A,箭头将到达那里,单击C时,箭头将从A到C,或者单击B时,它将从A到B。 。
A simple "left" animate function won't work since the positions and distances change every time. 简单的“左”动画功能将不起作用,因为位置和距离每次都会更改。 I have tried with the .step function and I guess it could work with that method but I can't seem to get it working the way it should. 我已经尝试过使用.step函数,但我猜它可以与该方法一起使用,但是我似乎无法使它按应有的方式工作。 There is not much info about the .step function out there. 关于.step函数的信息很少。
Closest I have came to achieve this is this, it moves to the correct position from any place the arrow is but it isn't animated, it just jumps. 我最近实现这一目标的方法是,它可以从箭头所处的任何位置移动到正确的位置,但是它没有动画,它只是跳跃而已。 Here is the line of code: 这是代码行:
Symbol.bindElementAction(compId, symbolName, "${_Button1}", "click", function(sym, e) {
sym.$("arrow").css({"-webkit-transform":"translate(11px, 201px)"})
});
(The weird markup is because I'm working in Adobe Edge. I'm testing all the possible ways of making HTML(5)/javascript ads and this is one of them) (奇怪的标记是因为我在Adobe Edge中工作。我正在测试制作HTML(5)/ javascript广告的所有可能方法,这就是其中之一)
How I would make an arrow animate to a clicked button: 我如何使箭头动画化为单击的按钮:
$('.btn').click(function(){
$('#arrow').animate({
'left': ($(this).offset().left + ($(this).outerWidth()/2)) - $('#arrow').outerWidth(),
'top': $(this).offset().top - 20
});
});
Also, make the arrow position:absolute;
另外,使箭头position:absolute;
if the buttons themselves dont have position:fixed
. 如果按钮本身没有position:fixed
。
Maybe I don't understand the question completely. 也许我不完全理解这个问题。 But I don't understand why this wouldn't work. 但是我不明白为什么这行不通。
If you mean the btns change position continously you will need to place the animate in a setInterval()
. 如果您的意思是btns连续改变位置,则需要将动画放置在setInterval()
。
In Adobe Edge the code has to be something like this (based on this link) : 在Adobe Edge中,代码必须是这样的(基于此链接) :
sym.$('#arrow').animate({
'left': ($(this).offset().left + ($(this).outerWidth()/2)) - $('#arrow').outerWidth(),
'top': $(this).offset().top - 20
});
I never used Adobe Edge, but I could be that your error (Javascript error in event handler! Event Type = element) is having problems with this
here and that there is another name to refer to the object that triggered the event. 我从未使用过Adobe Edge,但可能是您的错误(事件处理程序中的Javascript错误!事件类型=元素)在this
存在问题,并且还有另一个名称可以引用触发事件的对象。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.