calling a css3 transition from jquery

Question

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.

Scott · Accepted Answer · 2011-08-16 03:45:05Z

5

#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");
});

answered Aug 16, 2011 at 3:45

Scott

1607 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

frenchie Over a year ago

Ok, I fixed your example and got it to work: you need to remove the border and background definition from #MyDiv and put them in a different class called Regular, so that you have <div id="MyDiv" class="Regular"> see fix here: jsfiddle.net/v7AA7/11

Jonathan Over a year ago

The reason is that a id selector weights heavier than a simple class selector, so, change the .hover to #MyDiv.hover and it will work. jsfiddle.net/v7AA7/191

Gaff · Accepted Answer · 2013-03-11 19:13:33Z

3

For better mobile device performance, I would use webkit-transform rather than webkit-transition since you are going to be getting the hardware acceleration benefits from the mobile device, resulting in a smoother, native look when performing these transitions using CSS3.

In fact, I'd go ahead and get the jQuery Transit plugin, which makes it easy to use jQuery to invoke a given transition. It basically takes care of the CSS3 transitions for you and gives cross-browser compatibility.

JS Fiddle Demo

Javascript:

$("#startTransition").on("click", function()
{
    $("#MyDiv").transition({ background: 'yellow', color: 'black'});
});

answered Mar 11, 2013 at 19:13

Gaff

5,6873 gold badges40 silver badges49 bronze badges

Comments

buryat · Accepted Answer · 2011-08-16 02:05:20Z

2

You don't need any jQuery for this purpose. http://jsfiddle.net/v7AA7/ — example

#MyDiv{
    border:1px solid red;
    background:blue;
    transition: all 0.3s 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;
}

#MyDiv:hover{
    border:1px solid black;
    background:yellow;
    transition: all 0.3s 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;
}

answered Aug 16, 2011 at 2:05

buryat

3843 silver badges8 bronze badges

1 Comment

frenchie Over a year ago

No, I meant I want to trigger the transition on MyDiv when I'm hovering on SomeOtherDiv.

Robert McKee · Accepted Answer · 2013-02-10 05:07:48Z

#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;
}

#MyDiv.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");
});

Fixed Scott's answer. His wasn't working because the #MyDiv styles were overriding the .hover styles because its more specific. I changed the .hover style to include the id, which then allows it to override the #MyDiv style.

Collectives™ on Stack Overflow

calling a css3 transition from jquery

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related