Currently, I am implementing the Waypoints jQuery plugin to add animation to a series of images as a user scrolls over them. My goal is to apply certain CSS properties - opacity:1, filter:grayscale(0), -webkit-filter:grayscale(0), and -moz-filter:grayscale(0) - when the user interacts with these images.
The opacity effect is working fine on its own and successfully achieving the desired result. However, I am facing challenges in getting the grayscale filters (filter:grayscale(0), -webkit-filter:grayscale(0), -moz-filter:grayscale(0)) to work properly. Below is the code snippet I am using. I believe the solution might be straightforward, but I am struggling to pinpoint it.
/* Waypoints
-------------------------------------------------- */
/* set-defaults
------------------------- */
$.fn.waypoint.defaults = {
context: window,
continuous: true,
enabled: true,
horizontal: false,
offset: 0,
triggerOnce: true
}
/* #about-section-two
------------------------- */
$('#about-section-two').waypoint(function() {
$('.avatar' ).delay(0).animate({opacity: 1, filter: "grayscale(0)", -webkit-filter: "grayscale(0)", -moz-filter: "grayscale(0)"});
}, { offset: '50%' });
Any assistance or guidance on this matter would be highly appreciated.
Sincerely, Ian