CODEWITHSUNDEEP
javascriptjqueryanimation
Levi
Levi

Reputation: 305

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.

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. There is not much info about the .step function out there.

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)

Upvotes: 0

Views: 2185

Answers (1)

Sem
Sem

Reputation: 4669

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; if the buttons themselves dont have 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().

In Adobe Edge the code has to be something like this (based on this link):

  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.

Upvotes: 1

Related Questions