Today I am going to share with you a basic jquery scripting to change the background color of anybody or element which you want with a smooth css3 transition animation to change background color smoothly.
Here in this scenario I am changing body background color using two button “click to change background color” and second “click to toggle background color”.
For First button : background color will change one color to another color can not set back background to color to previous without refreshing page.
Java script code to change color :
1 2 3 4 | // These condition will change the body background color once orange to green if button change background clicked $('.btn-click').click(function() { $("body").css("background","#AFD629"); }) |
For Second Button: background color will change one color to another color and you can set it background to last color by clicking again on same button. This is know as background color toggle animation.
Here I am toggling a class on button click. Frist click to add class and second click to remove. You can repeat this process again n again.
Javascript :-
1 2 3 4 | // These condition will change the body background color when toggle button clicked $('.btn-toggle').click(function() { $("body").toggleClass("second-color"); }) |
Html presentation for this effect
HTML :-
1 2 3 4 | <!-- this button will change the background color only once orange color to green color, if allready green color found does not affect to color --> <button class="btn-click">Click to change Background Color</button> <!-- this button will change the background color every time when it clicked or you can say this will toggle the background color of the body --> <button class="btn-toggle">Click to toggle Background Color</button> |
Style for smooth background color change animation using css3 transition, yes here I am using css3 transition property to make background color change smooth.
Css :-
1 2 3 | body{background:#EEA011;transition:background 1s ease 0s;} button{background:rgba(255,255,255,0.3);border-radius:10px;border:1px solid #FFF;padding:10px;color:#ffffff;cursor:pointer;font-weight:bold;margin:25px;box-shadow:2px 2px 2px rgba(0,0,0,0.3);text-shadow:1px 1px 1px rgba(0,0,0,0.3)} .second-color{background:#AFD629 !important;} |
