jQuery in external file not working [closed]

Question

I have an external file being loaded via template.php using the following code:

function digital_dots_preprocess_views_view(&$vars) {
  $view = $vars['view'];
  if($view->name == 'work') {
    drupal_add_js(drupal_get_path('theme', 'digital_dots') . '/assets/scripts/fx.js');
  }
}

The JS file is being loaded with the following code:

(function ($) {
    $(".image-overlay").hide();
    //alert('It works!');
})( jQuery );

Un-commenting the alert will trigger the alert however the hide effect doesn't?

Very confused!

Answer 1

If you are getting alert from the JS file than it means your JS file is loading properly, and the problem of hide seems to be causing because hide to be called in the document.ready as following:

// Jquery wrapper for drupal to avoid conflicts between libraries.
(function ($) {
  // Jquery onload function.
  $(document).ready(function() {
    $(".image-overlay").hide();
  });
})(jQuery);