barzioni barzioni - 1 year ago 49
jQuery Question

trying to add .fadein effect after .addclass

Im trying to make the background fade in when hover an item.
tried to add .fadeIn after .addClass but it wont help.

$(function() {
$("#item1").hover(function() {
$('.result').addClass("result_hover");

}, function() {
$('.result').removeClass("result_hover");
});
});


$(function() {
$("#item2").hover(function() {
$('.result').addClass("result_hover2");

}, function() {
$('.result').removeClass("result_hover2");
});
});


this is my fiddle: http://jsfiddle.net/barzioni/jg21y3du/

Answer Source

you can use css transition for that

.result {
    width: 300px;
    height: 100px;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
}
.result_hover {
    background-color: blue;
    -webkit-transition: all 1s ease-in;
    -moz-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    transition: all 1s ease-in;
}
.result_hover2 {
    background-color:red;
    -webkit-transition: all 1s ease-in;
    -moz-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    transition: all 1s ease-in;
}

fiddle >> http://jsfiddle.net/vka54mqd/1/