css or jquery transition/animation

css or jquery transition/animation

by stofke

HTML

<img class="css" src="https://placehold.it/150x150/000000/ffffff?text=CSS">
<img class="css" src="https://placehold.it/150x150/000000/ffffff?text=CSS">
<img class="css" src="https://placehold.it/150x150/000000/ffffff?text=CSS">
<br />
<img class="jquery" src="https://placehold.it/150x150/000000/ffffff?text=JQuery">
<img class="jquery" src="https://placehold.it/150x150/000000/ffffff?text=JQuery">
<img class="jquery" src="https://placehold.it/150x150/000000/ffffff?text=JQuery">

CSS

.jquery {
    width:100px;
    height:100px;
    padding:3px;
    margin-top:50px;
    float:left;
}
br{
clear:both;
}
.css{
    width:100px;
    height:100px;
    padding:3px;
    margin-top:50px;
    float:left;
    -webkit-transition: margin 0.2s ease-out;
    -moz-transition: margin 0.2s ease-out;
    -o-transition: margin 0.2s ease-out;
    -transition: margin 0.2s ease-out;
}

.css:hover { 
margin-top:30px;
}

JavaScript

$('.jquery').hover(

function() {
    $(this).animate({
        marginTop: '-=20'
    }, 200);
}, function() {
    $(this).animate({
        marginTop: '+=20'
    }, 200);
});