jQuery addClass example

Change class name on click in jQuery

HTML

<button>Start Animation</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div class="eins" style="background:#212f21;height:100px;width:100px;position:absolute;"></div>
<div class="zwei" style="background:#98bf21;height:100px;width:100px;position:absolute;top:200px;"></div>

JavaScript

$(document).ready(function(){
  $("button").click(function(){
    $(".eins").fadeOut(1000)
    		.delay(2000)
        .setTimeout(function () {
            $(".eins").css("backgroundColor", "red");
            $(".eins").html("hahahhaha");
        }, 5000)
        .fadeIn(500)
    		.animate({left: '250px'}, 2000);
    $(".zwei").fadeOut(1000).fadeIn(4200).animate({left: '350px'}, 1000);
  });
});