IT. Expert System.

JQUERY

Effects


Effects

The jQuery library provides several techniques for adding animation to web pages.

Every element on a web page has certain events which can trigger a JavaScript event. Events are defined in the HTML tags.

hide() and show()

The .hide() and show() methods hide and show HTML elements.

The basic syntax is:

$(selector).hide(duration, callback)

$(selector).show(duration, callback)
Parameter Description
duration A string or number determining how long the animation will run. Can take the following values:
"slow", "fast", "normal", or milliseconds
callback The name of a function to be executed after the function completes

The following examples show the basic use:

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

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

toggle()

The jQuery toggle() method toggles the visibility of HTML elements using the show() or hide() methods.

The basic syntax is:

$(selector).toggle(duration, callback)
Parameter Description
duration A string or number determining how long the animation will run. Can take the following values:
"slow", "fast", "normal", or milliseconds
callback The name of a function to be executed after the function completes

The following example shows the basic use:

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

slideDown(), slideUp(), slideToggle()

The jQuery slide methods gradually change the height for selected elements.

The basic syntax is:

$(selector).slideDown(duration, callback)

$(selector).slideUp(duration, callback)

$(selector).slideToggle(duration, callback)
Parameter Description
duration A string or number determining how long the animation will run. Can take the following values:
"slow", "fast", "normal", or milliseconds
callback The name of a function to be executed after the function completes

The following example show the basic use of the slideDown() method:

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

The following example show the basic use of the slideUp() method:

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

The following example show the basic use of the slideToggle() method:

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

fadeIn(), fadeOut(), fadeTo(), fadeToggle()

The jQuery fade methods gradually change the opacity for selected elements.

The basic syntax is:

$(selector).fadeIn(duration, callback)
  
$(selector).fadeOut(duration, callback)

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

$(selector).fadeToggle(duration, opacity,callback)
Parameter Description
duration A string or number determining how long the animation will run. Can take the following values:
"slow", "fast", "normal", or milliseconds
opacity Specifies the opacity to fade to
callback The name of a function to be executed after the function completes

The following example show the basic use of the fadeOut() method:

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

The following example show the basic use of the fadeTo() method:

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

Custom Animations

The jQuery animate method performs a custom animation of a set of CSS properties.

The basic syntax is:

$(selector).animate(params,duration,easing,callback)
Parameter Description
params Defines the CSS properties that will be animated
duration A string or number determining how long the animation will run. Can take the following values:
"slow", "fast", "normal", or milliseconds
easing A string indicating which easing function to use for the transition
callback The name of a function to be executed after the function completes

The following example show the basic use of a custom animation:

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({height:300}, "slow");
    $("div").animate({width:300}, "slow");
    $("div").animate({height:100}, "slow");
    $("div").animate({width:100}, "slow");
  });
});
</script>    

For more information about jQuery effects, see Effects -> Overview along with the Ajax Effects method details.



Content

Android Reference

Java basics

Java Enterprise Edition (EE)

Java Standard Edition (SE)

SQL

HTML

PHP

CSS

Java Script

MYSQL

JQUERY

VBS

REGEX

C

C++

C#

Design patterns

RFC (standard status)

RFC (proposed standard status)

RFC (draft standard status)

RFC (informational status)

RFC (experimental status)

RFC (best current practice status)

RFC (historic status)

RFC (unknown status)

IT dictionary

License.
All information of this service is derived from the free sources and is provided solely in the form of quotations. This service provides information and interfaces solely for the familiarization (not ownership) and under the "as is" condition.
Copyright 2016 © ELTASK.COM. All rights reserved.
Site is optimized for mobile devices.
Downloads: 3359 / . Delta: 0.01774 с