I have this
$('#button1').click(function(){
$('#header_bg').fadeTo(15, 0, function()
{
document.getElementById('header_bg').style.fill = '#FF0000';
}).fadeTo('slow', 1);
$('#header_text1').fadeOut(250);
$('#header_text2').fadeIn(250);
});
I am trying to improve mobile performance (on iOS) of a jQuery heavy website. I have read iOS handles CSS transitions much better than jQuery. What is the best method of making these iOS friendly?
I've written loads about this (http://css3.bradshawenterprises.com) , but in short, you just add the transitions properties, then change the property.
So, instead of $('#header_text1').fadeOut(250);, you'd use in your CSS:
-webkit-transition: opacity 250ms ease-in-out;
-moz-transition: opacity 250ms ease-in-out;
-o-transition: opacity 250ms ease-in-out;
transition: opacity 250ms ease-in-out;
, then in your JS,
$('#header_text1').css({'opacity', 0});
If you want to run something when an animation has happened, there are events for transitionEnd that fire.
It's quite a different approach, but people have tried to bridge between JS and CSS in a few ways:
http://playground.benbarnett.net/jquery-animate-enhanced/ is a good link for this.
demo try this
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
.in, .out {
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 705ms;
-moz-animation-timing-function: ease-in-out;
-moz-animation-duration: 705ms;
}
.fade.out {
z-index: 0;
-webkit-animation-name: fadeout;
-moz-animation-name: fadeout;
}
.fade.in {
opacity: 1;
z-index: 10;
-webkit-animation-name: fadein;
-moz-animation-name: fadein;
}
CSS Transitions is the thing you are looking for,
Here is a nice demo displaying a image fade effect: http://cssnerd.com/2012/04/03/jquery-like-pure-css3-image-fade-in/
here is some demo code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
var change = true;
$('#ba').click(function() {
if(change) {
$('#a').css('opacity', ' 0');
$('#b').css('opacity', '1');
} else {
$('#a').css('opacity', '1');
$('#b').css('opacity', '0');
}
change = !change;
});
});
</script>
<style>
.fadeeffect {
-webkit-transition: opacity 250ms ease-in-out;
-moz-transition: opacity 250ms ease-in-out;
-o-transition: opacity 250ms ease-in-out;
transition: opacity 250ms ease-in-out;
}
</style>
</head>
<body>
<button type="button" id="ba" >
Click Me!
</button>
<div>
<p id="a"class="fadeeffect">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p id="b" class="fadeeffect">
eafdsaf dsa dgsf dgadg dfg dagfadgLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</body>
</html>
From the Rich Bradshaw's answer, an implementation of a fadeOut in jQuery with a callback would be:
// This function is an alternative to jquery fadeOut.
// jQuery fadeOut changes opacity gradually, forcing the browser to refresh the page each time.
// Using CSS transitions allows the browser to use GPU to render the page, which is much faster if the DOM is big.
jQuery.fn.fadeOut = function(callback) {
let $selector = $(this[0]);
$selector.addClass('fadeOut');
$selector.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",
function(e){
$selector.off(e);
$selector.removeClass('fadeOut');
$selector.css('display', 'none');
$selector.css('opacity', 1); // Revert back opacity since element is not displayed anymore
if(typeof callback === 'function')
callback();
});
$selector.css('opacity',0);
}
And of course .fadeOut:
.fadeOut {
-webkit-transition: opacity 1000ms ease-in-out;
-moz-transition: opacity 1000ms ease-in-out;
-o-transition: opacity 1000ms ease-in-out;
transition: opacity 1000ms ease-in-out;
}
You can then use as normally:
$('#div').fadeOut(function() { console.log('done!') };
The same can be done with fadeIn.
