Jquery – calling a css3 transition from jquery

cssjquery

CSS3 transitions are great! So far, I'm triggering them with :hover or :active declarations in the stylesheet. I'm looking to see if there's a way to trigger them from jquery.

For instance:

#MyDiv{
border:1px solid red;
background:blue;
transition: all 0.3s linear;
}

MyDiv:hover{
border:1px solid black;
background:yellow;
}

The :hover transition will trigger when the mouse moves over MyDiv but what I'm looking to do is something like:

$('#MyDiv').transition(hover); //that would be ideal

In other words, I'd like to trigger the css animation so that if I mouseover some other div, the #MyDiv animation will trigger with $('#SomeOtherDiv').mouseenter(function () { $('#MyDiv').transition(hover); });

The jquery animate function doesn't support color transitions and while I know you can add jqueryUI plugins to make it work, I was wondering if there's some way to make it work without, using jquery to call the css transition.

Best Answer

#MyDiv {
    border:1px solid red;
    background:blue;
    transition: all 2.0s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}

.hover{
    border:1px solid black;
    background:yellow;
    transition: all 2.0s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}

$("#MyOtherDiv")
.mouseenter(function(){
    $("#MyDiv").addClass("hover");
})
.mouseleave(function(){
    $("#MyDiv").removeClass("hover");
});
Related Topic