barzioni barzioni - 3 months ago 10
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

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/

Comments