Angular directive for jquery fade/slide animations. An approximate drop-in substitution for ng-show. Options can be passed using jq-options and specifying an object.

angular-jquery-fade-slide-directive.js

var app = angular.module('myApp', []);
app.directive('jqShowEffect', ['$timeout', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      // configure options
      var passedOptions = scope.$eval(attrs.jqOptions);
      
      // defaults
      var options = {
        type: 'fade', // or 'slide'
        duration: 200,
        delay: 0, 
        hideImmediately: false, // if true, will hide without effects or duration
        callback: null 
      };
      $.extend(options, passedOptions);
      var type = options.type;
      var duration = options.duration;
      var callback = options.callback;
      var delay = options.delay;
      var hideImmediately = options.hideImmediately;

      // watch the trigger
      var jqElm = $(element);
      scope.$watch(attrs.jqShowEffect, function(value) {
        if (hideImmediately && !value) {
          jqElm.hide(0, callback);
        } else {
          $timeout(function() {
            if (type == 'fade') {
              value ? jqElm.fadeIn(duration, callback) : jqElm.fadeOut(duration, callback);
            } else if (type == 'slide') {
              value ? jqElm.slideDown(duration, callback) : jqElm.slideUp(duration, callback);
            } else {
              value ? jqElm.show(duration, callback) : jqElm.hide(duration, callback);
            }
          }, delay);
        }
      });
    }
  }
}]);

example.html

<div jq-show-effect="whatever you use for ng-show" jq-options="{type:'fade', duration:200, delay:200, hideImmediately: true}">Content</div>

This is beautiful! Thank you!

I extended this a little bit by adding separate options for incoming (slideIn, fadeIn) & outgoing (slideOut, fadeOut).