Javascript 将jQuery动画应用于视图中的元素，由Angular JS动态加载？

我有一个使用Angular JS路由的单页应用程序。在一个动态加载的视图中的元素上，我想应用jQuery动画。仅仅在页面底部包含jQuery脚本是不够的，因为理论上它只能被调用一次

然而，在这种情况下，我甚至不能让它第一次打电话。我有以下代码

jQuery：

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

HTML:

---

同样，前面提到的HTML是Angular动态加载的视图的一部分。我希望每次路线更改时都应用动画，但我甚至无法在第一次加载时使动画工作

我不知道你想把动画称为什么。但是，既然你说你甚至不能让它第一次工作，那么我猜你不知道把你的代码放在哪里。尝试：

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

---

您可以在这里看到一个讨论，它可能会提供更多有用的信息。首先，将Angular和jQuery结合使用是一种不好的做法，但这里有一个链接可能会对您有所帮助

---

这可能有点多，但它让你更好地理解实际发生的事情。

也许我的问题不够具体，但我已经找到了答案。由于我不打算在整个站点中包含视图的这一部分和动画，我只是将jQuery附加到一个控制器上，该控制器的作用域覆盖了我的图像。然后，我在该控制器的范围内创建了一个函数，并调用了该函数

关联控制器中的我的代码：

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

---

关于同时使用jQuery和Angular的第一点是不正确的。在某些地方，MVC库非常优秀…比如创建单页应用程序。在其他方面，使用像jQuery这样的DOM操纵库要简单得多，效率也更高，而且在我一起使用它们的一点经验中，它们可以很好地一起使用。只是一个评论-我建议您查看

ng animate

，如果你不介意用css制作动画的话，它有很多很好的方法来处理这样的事情。谢谢你的评论。这实际上是我的投资组合，我想了解其中的一些内容，因为我特别提到了jQuery。据我所知，使用jQuery的人要比使用CSS3的人多得多。是的，它确实更容易使用，但使用css会让你获得更多的创作自由。还有比jquery更精简的js动画库，但jquery确实提供了易用性。

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

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