javascript - Code getting slow when using transform:rotate(); -
today making css project on codepen in want make hoverable area change property on hover. use many "p" tag , make control. when use transform:rotate(); property on p tags hover getting vey slow. when not using transform on tags works smoothly .so there way improve speed when using transform property. there ways not need copy paste many
tags.note: the transform property works slow. checked in many browser slow on all
this code link
$(document).ready(function() { $("p").addclass('def_bg def_hov_bg def_time def_anim'); $("#bg_col_1").click(function() { $(".def_bg").toggleclass("bg_1"); $(".def_bg").removeclass("bg_2 bg_3 bg_9 bg_4 bg_5 bg_6 bg_7 bg_8"); }); $("#bg_col_2").click(function() { $(".def_bg").toggleclass("bg_2"); $(".def_bg").removeclass("bg_1 bg_3 bg_4 bg_9 bg_5 bg_6 bg_7 bg_8"); }); $("#bg_col_3").click(function() { $(".def_bg").toggleclass("bg_3"); $(".def_bg").removeclass("bg_1 bg_2 bg_4 bg_9 bg_5 bg_6 bg_7 bg_8"); }); $("#bg_col_4").click(function() { $(".def_bg").toggleclass("bg_4"); $(".def_bg").removeclass("bg_1 bg_2 bg_3 bg_9 bg_5 bg_6 bg_7 bg_8"); }); $("#bg_col_5").click(function() { $(".def_bg").toggleclass("bg_5"); $(".def_bg").removeclass("bg_1 bg_2 bg_3 bg_4 bg_9 bg_6 bg_7 bg_8"); }); $("#bg_col_6").click(function() { $(".def_bg").toggleclass("bg_6"); $(".def_bg").removeclass("bg_1 bg_2 bg_3 bg_4 bg_5 bg_9 bg_7 bg_8"); }); $("#bg_col_7").click(function() { $(".def_bg").toggleclass("bg_7"); $(".def_bg").removeclass("bg_1 bg_2 bg_3 bg_4 bg_5 bg_6 bg_9 bg_8"); }); $("#bg_col_8").click(function() { $(".def_bg").toggleclass("bg_8"); $(".def_bg").removeclass("bg_1 bg_2 bg_3 bg_4 bg_5 bg_6 bg_7 bg_9"); }); $("#bg_col_9").click(function() { $(".def_bg").toggleclass("bg_9"); $(".def_bg").removeclass("bg_1 bg_2 bg_3 bg_4 bg_5 bg_6 bg_7 bg_8"); }); $("#hov_col_1").click(function() { $(".def_hov_bg").toggleclass("hov_1"); $(".def_hov_bg").removeclass("hov_2 hov_3 hov_4 hov_5 hov_6 hov_7 hov_8 hov_9"); }); $("#hov_col_2").click(function() { $(".def_hov_bg").toggleclass("hov_2"); $(".def_hov_bg").removeclass("hov_1 hov_3 hov_4 hov_5 hov_6 hov_7 hov_8 hov_9"); }); $("#hov_col_3").click(function() { $(".def_hov_bg").toggleclass("hov_3"); $(".def_hov_bg").removeclass("hov_2 hov_1 hov_4 hov_5 hov_6 hov_7 hov_8 hov_9"); }); $("#hov_col_4").click(function() { $(".def_hov_bg").toggleclass("hov_4"); $(".def_hov_bg").removeclass("hov_2 hov_3 hov_1 hov_5 hov_6 hov_7 hov_8 hov_9"); }); $("#hov_col_5").click(function() { $(".def_hov_bg").toggleclass("hov_5"); $(".def_hov_bg").removeclass("hov_2 hov_3 hov_4 hov_1 hov_6 hov_7 hov_8 hov_9"); }); $("#hov_col_6").click(function() { $(".def_hov_bg").toggleclass("hov_6"); $(".def_hov_bg").removeclass("hov_2 hov_3 hov_4 hov_5 hov_1 hov_7 hov_8 hov_9"); }); $("#hov_col_7").click(function() { $(".def_hov_bg").toggleclass("hov_7"); $(".def_hov_bg").removeclass("hov_2 hov_3 hov_4 hov_5 hov_6 hov_1 hov_8 hov_9"); }); $("#hov_col_8").click(function() { $(".def_hov_bg").toggleclass("hov_8"); $(".def_hov_bg").removeclass("hov_2 hov_3 hov_4 hov_5 hov_6 hov_7 hov_1 hov_9"); }); $("#hov_col_9").click(function() { $(".def_hov_bg").toggleclass("hov_9"); $(".def_hov_bg").removeclass("hov_2 hov_3 hov_4 hov_5 hov_6 hov_7 hov_8 hov_1"); }); $("#t-1").click(function() { $(".def_time").toggleclass("td-1"); $(".def_time").removeclass("td-2 td-3 td-4 td-5 td-6 td-7 td-8 td-9 td-10 td-11"); }); $("#t-2").click(function() { $(".def_time").toggleclass("td-2"); $(".def_time").removeclass("td-1 td-3 td-4 td-5 td-6 td-7 td-8 td-9 td-10 td-11"); }); $("#t-3").click(function() { $(".def_time").toggleclass("td-3"); $(".def_time").removeclass("td-2 td-1 td-4 td-5 td-6 td-7 td-8 td-9 td-10 td-11"); }); $("#t-4").click(function() { $(".def_time").toggleclass("td-4"); $(".def_time").removeclass("td-2 td-3 td-1 td-5 td-6 td-7 td-8 td-9 td-10 td-11"); }); $("#t-5").click(function() { $(".def_time").toggleclass("td-5"); $(".def_time").removeclass("td-2 td-3 td-4 td-1 td-6 td-7 td-8 td-9 td-10 td-11"); }); $("#t-6").click(function() { $(".def_time").toggleclass("td-6"); $(".def_time").removeclass("td-2 td-3 td-4 td-5 td-1 td-7 td-8 td-9 td-10 td-11"); }); $("#t-7").click(function() { $(".def_time").toggleclass("td-7"); $(".def_time").removeclass("td-2 td-3 td-4 td-5 td-6 td-1 td-8 td-9 td-10 td-11"); }); $("#t-8").click(function() { $(".def_time").toggleclass("td-8"); $(".def_time").removeclass("td-2 td-3 td-4 td-5 td-6 td-7 td-1 td-9 td-10 td-11"); }); $("#t-9").click(function() { $(".def_time").toggleclass("td-9"); $(".def_time").removeclass("td-2 td-3 td-4 td-5 td-6 td-7 td-8 td-1 td-10 td-11"); }); $("#t-10").click(function() { $(".def_time").toggleclass("td-10"); $(".def_time").removeclass("td-2 td-3 td-4 td-5 td-6 td-7 td-8 td-9 td-1 td-11"); }); $("#t-11").click(function() { $(".def_time").toggleclass("td-11"); $(".def_time").removeclass("td-2 td-3 td-4 td-5 td-6 td-7 td-8 td-9 td-10 td-1"); }); $("#e-1").click(function() { $(".def_anim").toggleclass("ef-1"); $(".def_anim").removeclass("ef-2 ef-3 ef-4 ef-5 ef-6 ef-7 ef-8"); }); $("#e-2").click(function() { $(".def_anim").toggleclass("ef-2"); $(".def_anim").removeclass("ef-1 ef-3 ef-4 ef-5 ef-6 ef-7 ef-8"); }); $("#e-3").click(function() { $(".def_anim").toggleclass("ef-3"); $(".def_anim").removeclass("ef-2 ef-1 ef-4 ef-5 ef-6 ef-7 ef-8"); }); $("#e-4").click(function() { $(".def_anim").toggleclass("ef-4"); $(".def_anim").removeclass("ef-2 ef-3 ef-1 ef-5 ef-6 ef-7 ef-8"); }); $("#e-5").click(function() { $(".def_anim").toggleclass("ef-5"); $(".def_anim").removeclass("ef-2 ef-3 ef-4 ef-1 ef-6 ef-7 ef-8"); }); $("#e-6").click(function() { $(".def_anim").toggleclass("ef-6"); $(".def_anim").removeclass("ef-2 ef-3 ef-4 ef-5 ef-1 ef-7 ef-8"); }); $("#e-7").click(function() { $(".def_anim").toggleclass("ef-7"); $(".def_anim").removeclass("ef-2 ef-3 ef-4 ef-5 ef-6 ef-1 ef-8"); }); $("#e-8").click(function() { $(".def_anim").toggleclass("ef-8"); $(".def_anim").removeclass("ef-2 ef-3 ef-4 ef-5 ef-6 ef-7 ef-1"); }); });p { margin: -5px; display: inline-block; padding: 9px; } .def_bg { background: #000; } /*default background-color*/ .def_hov_bg:hover { background: #fff; } /*default hover color */ .def_time { transition: .5s; } /*default transition time */ .def_time:hover { transition: 0s; } .def_anim { transform: none; } /*for background change*/ .bg_1 { background: #4559ef; } .bg_2 { background: #ef2626; } .bg_3 { background: #14a91b; } .bg_4 { background: #835c3b; } .bg_5 { background: #df3d82; } .bg_6 { background: #fff056; } .bg_7 { background: #558c89; } .bg_8 { background: #7d1935; } .bg_9 { background: #ffffff; } /*for hover change*/ .hov_1:hover { background: #4559ef; } .hov_2:hover { background: #ef2626; } .hov_3:hover { background: #14a91b; } .hov_4:hover { background: #835c3b; } .hov_5:hover { background: #df3d82; } .hov_6:hover { background: #fff056; } .hov_7:hover { background: #558c89; } .hov_8:hover { background: #7d1935; } .hov_9:hover { background: #ffffff; } /*for transition duration*/ .td-1 { transition: .5s; } .td-2 { transition: 1s; } .td-3 { transition: 2s; } .td-4 { transition: 3s; } .td-5 { transition: 5s; } .td-6 { transition: 8s; } .td-7 { transition: 10s; } .td-8 { transition: 20s; } .td-9 { transition: 30s; } .td-10 { transition: 60s; } .td-11 { transition: 100s; } .td-1:hover { transition: 0s; } .td-2:hover { transition: 0s; } .td-3:hover { transition: 0s; } .td-4:hover { transition: 0s; } .td-5:hover { transition: 0s; } .td-6:hover { transition: 0s; } .td-7:hover { transition: 0s; } .td-8:hover { transition: 0s; } .td-9:hover { transition: 0s; } .td-10:hover { transition: 0s; } .td-11:hover { transition: 0s; } .ef-1 { transform: rotatex(180deg); } .ef-2 { transform: rotatey(180deg); } .ef-3 { transform: rotatez(180deg); } .ef-4 { transform: rotatex(540deg); } .ef-5 { transform: rotatey(540deg); } .ef-6 { transform: rotatez(540deg); } .ef-7 { transform: rotatey(180deg) rotatez(180deg) rotatex(180deg); } .ef-6 { transform: rotatez(540deg) rotatey(540deg) rotatex(540deg); } .ef-8 { transform: rotatez(3600deg) rotatey(3600deg) rotatex(3600deg); } .ef-1:hover { transform: rotatex(0deg); } .ef-2:hover { transform: rotatex(0deg); } .ef-3:hover { transform: rotatex(0deg); } .ef-4:hover { transform: rotatex(0deg); } .ef-5:hover { transform: rotatex(0deg); } .ef-6:hover { transform: rotatex(0deg); } .ef-7:hover { transform: rotatex(0deg); } .ef-6:hover { transform: rotatex(0deg); } .ef-8:hover { transform: rotatex(0deg); }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="bg_col_1"> blue</button> <button id="bg_col_2"> red</button> <button id="bg_col_3"> green</button> <button id="bg_col_4"> brown</button> <button id="bg_col_5"> pink</button> <button id="bg_col_6"> yellow</button> <button id="bg_col_7"> ocean</button> <button id="bg_col_8"> magenta</button> <button id="bg_col_9"> white</button> <br> <button id="hov_col_1"> blue</button> <button id="hov_col_2"> red</button> <button id="hov_col_3"> green</button> <button id="hov_col_4"> brown</button> <button id="hov_col_5"> pink</button> <button id="hov_col_6"> yellow</button> <button id="hov_col_7"> ocean</button> <button id="hov_col_8"> magenta</button> <button id="hov_col_9"> white</button> <br> <button id="t-1">.5s</button> <button id="t-2">1s</button> <button id="t-3">2s</button> <button id="t-4">3s</button> <button id="t-5">5s</button> <button id="t-6">8s</button> <button id="t-7">10s</button> <button id="t-8">20s</button> <button id="t-9">30s</button> <button id="t-10">60s</button> <button id="t-11">100s</button> <br> <button id="e-0">none</button> <button id="e-1">effect-1</button> <button id="e-2">effect-2</button> <button id="e-3">effect-3</button> <button id="e-4">effect-4</button> <button id="e-5">effect-5</button> <button id="e-6">effect-6</button> <button id="e-7">effect-7</button> <button id="e-8">effect-8</button> <br> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>any appriciated, thanx
as far slowness issue goes, take problem codepen. checked code in snippet provided, , works great. however, when checked on codepen, super slow said. thus, think processing problem on codepen's end.
as far copy paste problem goes, try using pug or similar rewrite html. here's long list of p tags in pug:
- (var x = 0; x < 5; x++) p this compiles to:
<!-- 5 in loop --> <p></p> <p></p> <p></p> <p></p> <p></p> here's link pug's docs: https://pugjs.org/language/code.html
Comments
Post a Comment