title: Why won't the jQuery slide effect work in this example?
body: <pre><code>$("#photoAlbum").on("mouseenter", ".imagecontainer", function () {
      $(this).find('.controlbar').show("slide", { direction: "down" }, 1000);
  }).on("mouseleave", ".imagecontainer", function () {
      $(this).find('.controlbar').hide("slide", { direction: "up" }, 1000);
  });
  </code></pre>
  
  <p><code>.controlbar</code> is hidden by default</p>
  
  <p>The <code>.imagecontainer</code> div(s) is appended to #photoAlbum div after
  an ajax request hence why I am using <code>.on()</code> and not just <code>.hover(function() {}, function(){})</code></p>
  
  <p>The HTML, drop-backdrop is absolutely positioned.</p>
  
  <pre><code>&lt;div id="photoAlbum" class="tabcontent"&gt;
  
          &lt;div id="drop-backdrop"&gt; 
              &lt;div class="text"&gt;Drag files here to upload&lt;/div&gt; 
          &lt;/div&gt; 
          &lt;canvas id="drop-target"&gt;&lt;/canvas&gt; 
  
  &lt;div class="imagecontainer"&gt;&lt;div class="controlbar" style="visibility: hidden; "&gt;&lt;img src="/TreeView/images/delete.png" width="16px" height="16px"&gt;&lt;/div&gt;&lt;img src="/Content/photoAlbums/9/3/539695_t.jpg"&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>