When I add the transition line into my code it breaks jQuery. How can I fix it?
a(this).next().css({
left: c,
transition: 'opacity 1s ease-in-out'
});
I'm trying to set up a fade from one div to the next inside a slider
-
do you have jquery assigned to 'a' or should that be a '$'user1289347– user12893472012-04-19 22:29:08 +00:00Commented Apr 19, 2012 at 22:29
-
what do you mean 'breaks' jQuery?Fresheyeball– Fresheyeball2012-04-19 22:31:36 +00:00Commented Apr 19, 2012 at 22:31
-
@Fresheyeball, my script does not run at all when that line is there.Scott B– Scott B2012-04-19 22:39:27 +00:00Commented Apr 19, 2012 at 22:39
Add a comment
|
2 Answers
Step 1) Remove the semi-colon, it's an object you're creating...
a(this).next().css({
left : c,
transition : 'opacity 1s ease-in-out';
});
to
a(this).next().css({
left : c,
transition : 'opacity 1s ease-in-out'
});
Step 2) Vendor-prefixes... no browsers use transition since it's the standard and this is an experimental feature even in the latest browsers:
a(this).next().css({
left : c,
WebkitTransition : 'opacity 1s ease-in-out',
MozTransition : 'opacity 1s ease-in-out',
MsTransition : 'opacity 1s ease-in-out',
OTransition : 'opacity 1s ease-in-out',
transition : 'opacity 1s ease-in-out'
});
Here is a demo: http://jsfiddle.net/83FsJ/
Step 3) Better vendor-prefixes... Instead of adding tons of unnecessary CSS to elements (that will just be ignored by the browser) you can use jQuery to decide what vendor-prefix to use:
$('a').on('click', function () {
var myTransition = ($.browser.webkit) ? '-webkit-transition' :
($.browser.mozilla) ? '-moz-transition' :
($.browser.msie) ? '-ms-transition' :
($.browser.opera) ? '-o-transition' : 'transition',
myCSSObj = { opacity : 1 };
myCSSObj[myTransition] = 'opacity 1s ease-in-out';
$(this).next().css(myCSSObj);
});
Here is a demo: http://jsfiddle.net/83FsJ/1/
Also note that if you specify in your transition declaration that the property to animate is opacity, setting a left property won't be animated.
10 Comments
animuson
Wait, what semi-colon did you remove?
Jasper
The OP removed the semi-colon from the code, I'll post an example of what I'm talking about.
Jasper
@ScottB
WebkitTransition is DOM-style syntax, used like this: document.getElementById('some-id').style.WebkitTransition = 'opacity 1s east-in-out';. -webkit-transition is CSS-style syntax. jQuery can handle either style of syntax.Jasper
@Redtopia I think the best case scenario is when you detect by feature rather than detect by User-Agent. Modernizr does a good job of this, allowing you to only use the property (or properties) supported by the current browser. If you're interested in Modernizr, check-out the
prefixed method, which gives you the correctly prefixed property name when you pass-in the standard property name. e.g. Modernizr.prefixed("transform") in a webkit browser will return -webkit-transform.
spectre-d
As far as today, Chrome recognizes just
transition. |
Your code can get messy fast when dealing with CSS3 transitions. I would recommend using a plugin such as jQuery Transit that handles the complexity of CSS3 animations/transitions.
Moreover, the plugin uses webkit-transform rather than webkit-transition, which allows for mobile devices to use hardware acceleration in order to give your web apps that native look and feel when the animations occur.
Javascript:
$("#startTransition").on("click", function()
{
if( $(".boxOne").is(":visible"))
{
$(".boxOne").transition({ x: '-100%', opacity: 0.1 }, function () { $(".boxOne").hide(); });
$(".boxTwo").css({ x: '100%' });
$(".boxTwo").show().transition({ x: '0%', opacity: 1.0 });
return;
}
$(".boxTwo").transition({ x: '-100%', opacity: 0.1 }, function () { $(".boxTwo").hide(); });
$(".boxOne").css({ x: '100%' });
$(".boxOne").show().transition({ x: '0%', opacity: 1.0 });
});
Most of the hard work of getting cross-browser compatibility is done for you as well and it works like a charm on mobile devices.
