JQuery learning(5):JQuery effect

 

JQuery effect

 Jquery is able to create hide,show,toggle,slide and customization animation effect so on.

Example:

jQuery hide()

Demonstrate the simple jQuery hide() function.

 

jQuery hide()

Other hide demonstration,How to hide partial text.

 

jQuery slidetoggle()

Demontrate the simple slide panel effect.

 

jQuery  fadeTo()

Demontrate the simple fadeTo function.

 

jQuey animate()

Demonstrate the simple animate function.

JQuery hide and show

Via hide() and show() two functions,jQuery support to hide and show HTML elements.

Example:

$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});

The hide() and the show() was able to setup tow optional parameters:speed and callback

Syntax:

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

The speed parameter defines the speed of show or hide.Be able to setting these values:"slow", "fast", "normal" or millisecond.

The callback parameter was executed function name after complete the show and hide fucntions call.

Example:

$("button").click(function(){
$("p").hide(1000);
});

JQuery toggle

The jQuery toggle fucntion uses the hide() or show function to switch visible status of HTML elements.

Hide the displayed elements, show the hidden elements.

Syntax:

$(selector).toggle(speed,callback)

The speed parameter defines the speed of show or hide.Be able to setting these values:"slow", "fast", "normal" or millisecond.

The callback parameter was executed function name after complete the show and hide fucntions call.

Example:

$("button").click(function(){
$("p").toggle();
});

JQuery slide functions-slidedown,slideup,slidetoggle

The jQuery has the following slide fucntions:

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

The speed parameter defines the speed of show or hide.Be able to setting these values:"slow", "fast", "normal" or millisecond.

The callback parameter was executed function name after complete the show and hide fucntions call.

The slideDown example:

$(".flip").click(function(){
$(".panel").slideDown();
});

The slideUp example:

$(".flip").click(function(){
$(".panel").slideUp()
})

The slideToggle example:

$(".flip").click(function(){
$(".panel").slideToggle();
});

JQuery fade functions-fadeIn, fadeOut,fadeTo

The jQuery has the following fade functions:

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

The speed parameter defines the speed of show or hide.Be able to setting these values:"slow", "fast", "normal" or millisecond.

The opacity parameter defines the weaken to given opacity in the fadeTo function.

The callback parameter was executed function name after complete the show and hide fucntions call.

The fadeTo() example:

$("button").click(function(){
$("div").fadeTo("slow",0.25);
});

The fadeOut() example:

$("button").click(function(){
$("div").fadeOut(4000);
});

JQuery customer animation

The jQuery function syntax of create customer animation:

$(selector).animate({params},[duration],[easing],[callback])

The key paraneter is params.It defines CSS attributes of generate animation,Be able to setting multiple this kinds of attibutes

animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

The second parameter is duration,it defines duration time of apply to animation.Be able to setting these values:"slow", "fast", "normal" or millisecond.

Example One:

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>

Example two:

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script> 

The HTML elements default is static location,and  can not move.

If need to the elements can be moved,please take the  position of CSS set to relative or absolute.