Почему в этом примере не работает эффект слайда jQuery?

Question

$("#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); 
}); 

.controlbar по умолчанию скрыта

В .imagecontainer ДИВ (s) добавляется к #photoAlbum DIV после Ajax запроса, следовательно, почему я использую .on() и не только .hover(function() {}, function(){})

HTML-, нижепреведенного фон абсолютно позиционируется.

<div id="photoAlbum" class="tabcontent"> 

     <div id="drop-backdrop"> 
      <div class="text">Drag files here to upload</div> 
     </div> 
     <canvas id="drop-target"></canvas> 

<div class="imagecontainer"><div class="controlbar" style="visibility: hidden; "><img src="/TreeView/images/delete.png" width="16px" height="16px"></div><img src="/Content/photoAlbums/9/3/539695_t.jpg"></div></div> 

Answer 1

вы должны загрузить jQuery UI библиотеку, если вы хотите, чтобы ваш скрипт работать

или использование:

$("#photoAlbum").on("mouseenter", ".imagecontainer", function() { 
    $(this).find('.controlbar').slideDown(1000); 
}).on("mouseleave", ".imagecontainer", function() { 
    $(this).find('.controlbar').slideUp(1000); 
}); 

вместо style="visibility: hidden; " использование style="display:none; "