javascript - Which is more efficient, spritesheet or css classes -


i want implement feedback on div when user click on it. div fade color , original color again.

my first option use spritesheet, change background position property of div. part of implementation looks this:

pos = 0; function fadeaction(el){    if (pos != 100){      pos += 10;      $(el).css("background-position","0% "+pos+"%");      settimeout(function(){fadeaction(el);},10);    }else       pos=0;    } 

my second option change background color according array of colors:

colors = ["#ff00ff","#443322", etc];  = 0; function fadeaction(el){    if (pos != 10){      += 1;      $(el).css("background-color",colors[i]);      settimeout(function(){fadeaction(el);},10);    }else       i=0;    } 

my third option (which scrapped due device incompatiblity) use jquery.color.

function fadeaction(el){   $(el).css("background-color",fadecolor);   $(el).animate({     backgroundcolor: "#e9e9e9"   }, 150 ); 

}

which of these 2 methods (scrapping third) efficient? there multiple buttons (div) on page use function , used on mobile devices webkit browsers.

best performance achieved css3. because browser uses hardware acceleration.

edit: wrong (thanx zougen moriver) isn't automatically triggered (see comment) has still better performance on javascript solutions.

here example:

.test {     height: 100px;     width: 100px;     background-color: #eee;     -webkit-transition: 1s ease-in-out;     -moz-transition: 1s ease-in-out;     -o-transition: 1s ease-in-out;     transition: 1s ease-in-out;   } .test:hover {     background-color: #fc3; } 

http://jsfiddle.net/vandeplas/lznzb/

i used hover because doesn't need javascript, if change color (via javascript, adding class or changing style) fade color.

the downside isn't supported on legacy browsers..

here example using on click handler:

$('.test').on('click', function() {     $(this).css('background-color', 'green');     //$(this).addclass('othercolor'); }); 

http://jsfiddle.net/vandeplas/lznzb/1/

as can see commented out other option using class... both work...


Comments

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -