test_jquery

by jpeter06

HTML

<button class="clase1">hide</button><button class="clase1">show</button><button id="append">append</button>
<p>uno</p>
<p>dos</p>
<p>tres</p>
<br>
<button id="fadeIn">fadeIn</button><button id="fadeOut">fadeOut</button>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<!-- SLIDE -->
<button id="stop">stop</button>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
<br>
<button id="anime">anime</button>
<div id="animed" style="background:#98bf21;height:100px;width:100px;position:relative;">
</div>
<button id="css">css</button>
<div id="cssed" style="background:#eeaa44;height:100px;width:100px;">
</div>
<button id="ajax">ajax</button>
<div id="ajaxed" style="background:#eeaa44;height:100px;width:100px;">
</div>

CSS

#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}

JavaScript

//ready, click,dblclick,focus,mouseover
//hide,show(speed,callback),toggle
//fadeIn,fadeOut,fadeTo,fadeToggle
//slideDown,slideUp,slideToggle
// html, append, preprend, after,before
//css
// AJAX: load(URL,data,callback),$.ajax(options)

$(document).ready(function(){
    $(".clase1:first").click(function(){
        $("p").hide("slow");
    });
     $(".clase1:last").click(function(){
        $("p").show("fast");
    });
    $("#append").click(function(){
       $("p").append(" W3Schools.");
    });
    
    //FADE
    $("#fadeIn").click(function(){
    $("#div1").fadeIn();
  });
    $("#fadeOut").click(function(){
    $("#div1").fadeOut();
  });
    
    $("#flip").click(function(){
    $("#panel").slideToggle(600);
  });
      $("#stop").click(function(){
  $("#panel").stop();
});
    
  $("#anime").click(function(){
    $("#animed").animate({height:'300px',opacity:'0.4'},"slow");
    $("#animed").animate({width:'300px',opacity:'0.8'},"slow");
    $("#animed").animate({height:'100px',opacity:'0.4'},"slow");
    $("#animed").animate({width:'100px',opacity:'0.8'},"slow");
  });
    
     $("#css").click(function(){
      $("#cssed").css("background","yellow");
         $("#cssed").width("200px");
    });
    
     $("#ajax").click(function(){
         var date=new Date();
         $.ajax({url:"/echo/html/",type: 'POST',data:{'html': date} ,dataType: 'html',success:function(result){
             $("#ajaxed").html(result);
         }});
    });

});