Эффект перехода jquery на блок

Question

Я пытаюсь добавить эффект на div, где, как только вы наведете над блоком, блок будет двигаться вверх. Я использую Jquery-переходы, поскольку я знаю, что что-либо в ie10 действительно не поддерживает css-переходы. На данный момент я могу заставить его двигаться, но на движение не влияет (просто используя css). Я не уверен, как начать добавлять jquery-переход.

В данный момент я получил его так, что как только вы наведите курсор на блок, он добавит класс.

$(document).ready(function() { 
    $(".container").hover(function() { 
     $(this).toggleClass("animated-effect"); 
    }); 
}); 

Heres мой jsfiddle, я не могу управлять, чтобы получить код для работы что-то с моими ЯШАМИ: http://jsfiddle.net/4bgj4959/

Answer 1

Вы ищете метод animate. Обратите внимание, что метод hover принимает два параметра, второй параметр для onmouseout (когда вы закончите зависание).

$(document).ready(function() { 
 
    $(".container").hover(function() { 
 
    $(this).animate({ 
 
     top: '20px' 
 
    }) 
 
    }, function() { 
 
    $(this).animate({ 
 
     top: '0px' 
 
    }) 
 
    }); 
 
});

.container { 
 
    width: 500px; 
 
    height: 100px; 
 
    border: 1px solid #00c; 
 
    position: relative; 
 
    top: 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
</div>

Answer 2

вы код работает, вы не включает jquery см обновленного fiddle
demo