How to add jQuery fadeIn on scroll to Angular application
Question
Let me preface this by saying that I realize this is terrible practice. However, is it possible to use jQuery to fade in images on scroll in an AngularJS project?
I've got a tight deadline at work, and need to make this Angular project look better. I don't have the time to wrap my head around the Angular way of doing this at the moment, so the quick and dirty will have to suffice.
Here's where I'm at:
I have a controller, LandingCtrl
angular.module('appName.controllers', [])
.controller('LandingCtrl', ['$scope', function($scope) {
}]);
And I have a view with a bunch of divs in it that I want to fade in as the user reaches them.
Using jQuery alone, it would be pretty straight forward, something like this: http://jsfiddle.net/tcloninger/e5qaD/
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.hideme').each( function(i){
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
});
However, when I try to use that jQuery function in my controller that is scoped to the view in question, I get all kinds of problems.
Is there any way to do this properly?
Thanks in advance.
1 answers
solution1
2 ACCPTED 2015-03-05 12:06:05
If you're going to use jquery, you can just stick (pretty much) what you have in a directive:
angular
.module('app', [])
.directive('scrollContainer', scrollContainer)
function scrollContainer($window) {
return {
restrict: 'A',
scope: true,
link: function(scope, element, attrs) {
angular.element($window).bind("scroll", function() {
$('.hideme').each( function(i){
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
}
}
}
<body ng-app="app">
<div id='container' scroll-container>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div class="hideme">Fade In</div>
<div class="hideme">Fade In</div>
<div class="hideme">Fade In</div>
<div class="hideme">Fade In</div>
<div class="hideme">Fade In</div>
</div>
</body>
Plunker appears to be down, so i've stuck a working example on codepen
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.