Question

经过长时间的搜索和尝试，我似乎无法找到解决方案。我想要做的是动画箭头以转到点击按钮上方的特定位置。有3个按钮（让他们称之为A，B和C），如果单击A，箭头将会到达那里，当点击C时，箭头将从A变为C或单击B时，它将进入从A到B。

一个简单的＆＃34;左＆＃34;由于位置和距离每次都在变化，因此动画功能无法工作。我已尝试使用.step函数，我想它可以使用该方法，但我似乎无法按照应有的方式工作。关于.step功能的信息不多。

最接近我实现这一目标，它从箭头所在的任何地方移动到正确的位置，但它没有动画，它只是跳跃。这是代码行：

Symbol.bindElementAction(compId, symbolName, "${_Button1}", "click", function(sym, e) {
   sym.$("arrow").css({"-webkit-transform":"translate(11px, 201px)"})
});

（奇怪的标记是因为我在Adobe Edge工作。我正在测试制作HTML（5）/ javascript广告的所有可能方法，这就是其中之一）

Answer 1

如何为点击的按钮制作箭头动画：

$('.btn').click(function(){
  $('#arrow').animate({
    'left': ($(this).offset().left + ($(this).outerWidth()/2)) - $('#arrow').outerWidth(),
    'top': $(this).offset().top - 20
  });
});

另外，如果按钮本身没有position:absolute;，请设置箭头position:fixed。

也许我完全不理解这个问题。但我不明白为什么这不起作用。

如果你的意思是btns连续改变位置，你需要将动画放在setInterval()。

在Adobe Edge中，代码必须类似于（基于this链接）：

  sym.$('#arrow').animate({
    'left': ($(this).offset().left + ($(this).outerWidth()/2)) - $('#arrow').outerWidth(),
    'top': $(this).offset().top - 20
  });

我从未使用过Adobe Edge，但我可能是您的错误（事件处理程序中的Javascript错误！事件类型=元素）此处遇到this问题而且还有另一个问题name表示触发事件的对象。

使用jQuery将元素从任意位置动画到固定位置

1 个答案: