Online jQuery Editor

Browse more Jquery Examples
<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $("em").addClass("selected");
   $("#myid").addClass("highlight");
   $("p").css("color","red");
   $('.hid').click(function(){
       var $this = $(this);
       var greet = $("#greet");
       $this.toggleClass('hid');
       if($this.hasClass('hid')){
           $this.text('Hide');
           greet.show(1500);
       }else{
           $this.text('Show');
           greet.hide(1500);
       }
       
   });
   $('.rect'.click(function(){
   var div = $("div");
            div.animate({height: '300px', opacity: '0.2'}, "slow");
            div.animate({width: '300px', opacity: '0.4'}, "slow");
            div.animate({height: '100px', opacity: '0.6'}, "slow");
            div.animate({width: '100px', opacity: '0.8'}, "slow");
   
       
   });        
});

</script>
</head>
<body>
<button class="rect">Rechteck</button><br><br>
<button class="hid">Hide</button><br><br>
<em title="Bold and Brave">TEST</em><br><br>
<p id="greet">Hello</p><br>
<div style="background:#123456;height:100px;width:100px;position:absolute;"></div><br>
</body>
</html>
Online jQuery Editor

Follow

Newsletter
