Hi I am having trouble doing animations on my lightning components using jquery or velocity.

For example if i use jquery to fadeOut an element nothing happens, also when i use another library like velocity i can see it is apply the css on the element but nothing happens?

I am using

<ltng:require scripts="{!join(',', $Resource.AnimateCSS + '/animate/jquery-2.2.4.min.js', 
                                   $Resource.AnimateCSS + '/animate/velocity.min.js',
                                   $Resource.AnimateCSS + '/animate/velocity.ui.min.js')}" afterScriptsLoaded="{!c.scriptsLoaded}"/> 

some where on click handle is being called:

_$(component.getElement()).velocity({ width: 50 }, [ 250, 15 ]);

I can see the css being added to the class of the element but nothing happens?

1 Answer 1


It sounds like there are different forces at work for the jQuery versus Velocity scenarios. If you are seeing the DOM changes actually happen but no visible impact it sounds like the selectors are not matching. Lightning applies a CSS namespacing technique (auto adds classes to elements it creates), based on component name and namespace, that can sometimes make it a bit trickier to get selectors to match.

In the jQuery case I believe the issue is a bug in Locker Service that we've been trying to track down for weeks - finally solved it on Thursday and the fix is going out this Tuesday/Wednesday (element.style.blah = was not functioning).

Would you please try your scenarios with Locker Service deactivated under Setup | Critical Updates? Make sure it's the update for LS alone and not the one for LS in Communities. Please post here if you observe a difference (or not) in behavior with it activated versus deactivated.

  • Hi i have checked and the locker service is disabled?
    – lodoss118
    Commented Jun 19, 2016 at 15:14
  • i am doing something like this now: var _$ = jQuery.noConflict(); var index = parseInt(component.get("v.index")); var btn = _$("#toast-btn-" + index); console.log(btn); btn.click(function() { console.log("CLICKED"); _$("#toast-" + index).fadeOut(1000); //$A.util.removeClass(component, "animated fadeIn"); });
    – lodoss118
    Commented Jun 19, 2016 at 15:31
  • but no luck the click event works but fading does not?
    – lodoss118
    Commented Jun 19, 2016 at 15:32
  • ok did a test with _$("#toast-" + index).fadeOut(10000000, "linear", function() { console.log("finished"); }); ---- and it always calls the finish method straight away?
    – lodoss118
    Commented Jun 19, 2016 at 15:37

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .