Applying jQuery animation to element in view dynamically loaded by Angular JS on load?

Question

I have a single page application that uses Angular JS routing. On an element in one of the dynamically loaded views, I would like to apply a jQuery animation. Simply including a jQuery script at the bottom of the page is not sufficient because it should theoretically only be called once.

However, that being the case I can't even get it to call the first time. I have the following code...

jQuery:

$("#main-content-overlay").fadeIn().animate({top:65}, 500);

HTML:

<img src="images/home/main-content-background.jpg" id="main-content" />
<img src="images/home/main-content-overlay.png" id="main-content-overlay" />

Again, the aforementioned HTML is part of a view that is loaded dynamically by Angular. I would like my animation to be applied every time the route changes, but I can't even get the animation to work on the first load.

Just a comment - I would recommend checking out ng-animate, it has a lot of great ways to handle stuff like this if you don't mind doing the animations in css. — ajmajmajma
– ajmajmajma, Commented Jul 30, 2015 at 13:37
Thanks for the comment. This is actually for my portfolio, and I wanted to get a little bit of everything in there, because I mention jQuery specifically. That, and as far as I know far more people can use jQuery than CSS3. — Allenph
– Allenph, Commented Jul 30, 2015 at 14:04
Yeah it's definitely easier to use but you'll get a lot more creative freedom with using css. Also there are more streamlined js animation libraries than jquery, but jquery provides ease of use for sure. — ajmajmajma
– ajmajmajma, Commented Jul 30, 2015 at 14:21

Alejandro Ocampo · Accepted Answer · 2015-07-30 12:39:18Z

2

I am not sure where are you trying to call the animation stuff. But, since you're saying you cannot even make it to work for the first time then my guess is that you don't know where to put your code. Try:

$scope.$on('$locationChangeStart', function(event) {
  // Do something here (like calling your animation)
});

You can see a discussion here that might provide further useful information https://github.com/angular/angular.js/issues/2109

answered Jul 30, 2015 at 12:39

Alejandro Ocampo

2662 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Allenph · Accepted Answer · 2015-07-30 12:51:42Z

0

Perhaps I wasn't specific enough in my question, but I have since discovered the answer. Since I wasn't intending to include this part of the view with the animation in the whole site, I simply attached my jQuery to a controller who's scope covered my images. I then created a function within the scope of that controller, and called that function.

My code in the associated controller:

this.animateOverlay = function() {
    $("#main-content-overlay").fadeIn({queue: false, duration: 1000}).animate({top: "+=65px"}, 500);
};
this.animateOverlay();

answered Jul 30, 2015 at 12:51

Allenph

2,0352 gold badges29 silver badges47 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:51:14Z

0

Well first of all using Angular and jQuery together is bad practice but here's a link that might be useful concerning How to use jQuery in AngularJS

var myEl = angular.element(document.querySelector( '#main-content-overlay'));   
myEl.fadeIn().animate({top:65}, 500);

It might be a little much but it gives you a better understanding of what is actually happening.

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Jul 30, 2015 at 12:41

Skam

7,8985 gold badges25 silver badges31 bronze badges

1 Comment

Allenph Over a year ago

That first bit about using jQuery and Angular together isn't true. In some places MVC libraries excel...like creating single page applications. In other ways, it's far easier and more efficient to use a DOM manipulation library like jQuery, and in the little experience I've had using them together, they play nicely together.

Collectives™ on Stack Overflow

Applying jQuery animation to element in view dynamically loaded by Angular JS on load?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related