Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Basic Tutorial of Jquery Effects Method

    • 0
    • 1
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 320
    Comment on it

    About JQuery

    jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.

    jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. JQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library.

    -From Wikipedia

    Using JQuery

    The jQuery library is a single JavaScript file including all of its common DOM, event, effects, and Ajax functions. jQuery library can be included within a web page by linking from a local path or to one of the various version copies available from jQuery public servers.


    Example of Including jQuery File

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    

    JQuery Effects

    jQuery provides a simple interface for creating various kind of amazing effects. jQuery effects methods lets us to implement commonly used effects with a minimum code configuration instantly.

    Below I have provided following table lists of JQuery Effects Methods for creating animation effects.

    Method Description
    animate()

    To Runs a customized animation to the selected elements

    This animate() method switch an element from one particular form to another with CSS styles elements. The CSS property value is switched progressively, to create an animated effect.

    In animate() method, only numeric values can be performed (like "margin:30px"). String values cannot be performed (like "background-color:red").

    Important Note: Only Use "+=" or "-=" on relative animations for selected elements.

    For Example
    //HTML Elements
    <input type="button" value="Start Animation" class="startAnimBtn" />
    <div id="box"> Test Content here </div>
    
    
    //Jquery Animate() Effects Function                            
    $(".startAnimBtn").click(function(){
        $("#box").animate({height: 300}, 1500);
        $("#box").animate({width: 300}, 1500);
    });
    
    clearQueue()

    The clearQueue() method helps to remove or dismiss all the remaining elements from the queue that have not been run yet.

    Important Note: clearQueue() is much different from the stop() and finish() method(as stop() and finish() method only works with animation) whereas clearQueue() can remove any type of queued functions.

    Below is the simple example to remove all the remaining functions queued from the elements selected-

    For Example
    //HTML Elements
    <input type="button" value="Start Animation" class="startBtn" />
    <input type="button" value="Stop Animation" class="stopBtn" />
    <div id="box"> Test Content here </div>
    
    
    //Jquery clearQueue() Effects Function
    $(".startAnimBtn").click(function(){
        $("#box").animate({height: 300}, 1500);
        $("#box").animate({width: 300}, 1500);
    });                       
    $(".stopAnimBtn").click(function(){
        $("#box").clearQueue();
    });
    
    delay()

    Delay() method helps us to set a specific interval of delay effect to other jquery methods for all queued functions on the selected elements

    Delay() method helps to set a sequential interval of any effect. This method works with all other jquery method (such as- fadeIn, fadeOut, show etc.)

    For Example
    //HTML Elements
    <input type="button" value="Delay Effect" class="clickDelayBtn" />
    <div id="box"> Test Content here </div>
    <div id="box01"> Test Content here </div>
    <div id="box02"> Test Content here </div>
    
    //Jquery Delay() Effects Function                            
    $(".clickDelayBtn").click(function(){
        $("#box").delay("slow").fadeIn();
        $("#box 01").delay(1000).fadeIn();
        $("#box 02").delay(1400).fadeIn();
    });
    
    fadeIn()

    FadeIn() method allow to create a fade effect to show any specific elements.

    FadeIn() method helps to achieve an elegant fade effect while showing any content or elements through providing fading value range.

    For Example
    //HTML Elements
    <input type="button" value="Fade In" class="fadeInBtn" />
    <input type="button" value="Fade Out" class="fadeOutBtn" />
    <div id="box"> Test Content here </div>
    
    //Jquery fadeIn() Effects Function                            
    $(".fadeOutBtn").click(function(){
        $("#box").fadeOut(700)
    });
    $(".fadeInBtn").click(function(){
        $("#box").fadeIn(700);
    });
    
    fadeOut()

    FadeOut() method is allowed to create a fade effect to hide any specific elements.

    FadeOut() method helps to achieve an elegant fade effect while hiding any content or elements through providing fading value range.

    For Example
    //HTML Elements
    <input type="button" value="Fade In" class="fadeInBtn" />
    <input type="button" value="Fade Out" class="fadeOutBtn" />
    <div id="box"> Test Content here </div>
    
    //Jquery fadeOut() Effects Function                            
    $(".fadeOutBtn").click(function(){
        $("#box").fadeOut()
    });
    $(".fadeInBtn").click(function(){
        $("#box").fadeIn();
    });
    
    fadeToggle()

    FadeToggle() method works between fadeIn() and fadeOut method. Gradually FadeToggle() allows reversible effect while the element have fadeIn() or fadeOut() mode.

    For Example
    //HTML Elements
    <input type="button" value="FadeToggle" class="fadeToggleBtn" />
    <div id="box"> Test Content here </div>
    <div id="box01"> Test Content here </div>
    <div id="box02"> Test Content here </div>
    
    //Jquery FadeToggle Effects Function                            
    $(".fadeToggleBtn").click(function(){
        $("#box").fadeToggle(700);;
        $("#box 01").fadeToggle(1000);;
        $("#box 02").fadeToggle(1500);;
    });
    
    finish()

    The finish() method allow to stop, remove and complete the running animation and all queued animation for the selected element.

    For Example
    //HTML Elements
    <input type="button" value="Start Animation" class="startBtn" />
    <input type="button" value="Finish Animation" class="finishBtn" />
    <div id="box"> Test Content here </div>
    
    //Jquery Finish Effects Function                            
     $(".startBtn").click(function(){
        $(".box").animate({height: 300}, 3000);
        $(".box").animate({width: 300}, 3000);
    });
    $(".finishBtn").click(function(){
        $(".box").finish();
    });
    
    hide()

    The Hide() method helps to build hidden effect to selected element. Hide() method is mostly similar to CSS 'display:none' property.

    For Example
    //HTML Elements
    <input type="button" value="Show" class="showBtn" />
    <input type="button" value="Hide" class="hideBtn" />
    <div id="box"> Test Content here </div>
    
    //Jquery Hide Effects Function                            
     $(".showBtn").click(function(){
        $(".box").show(400);
    });
    $(".hideBtn").click(function(){
        $(".box").hide(400);
    });
    
    show()

    The show() method helps to create visible effect to selected element. show() method is mostly similar to CSS 'display:block' property.

    For Example
    //HTML Elements
    <input type="button" value="Show" class="showBtn" />
    <input type="button" value="Hide" class="hideBtn" />
    <div id="box"> Test Content here </div>
    
    //Jquery Show Effects Function                            
     $(".showBtn").click(function(){
        $(".box").show(400);
    });
    $(".hideBtn").click(function(){
        $(".box").hide(400);
    });
    
    slideDown()

    The slideDown() method is similar to show() method. It is implemented to show the selected hidden content or element. SlideDown() method is only worked in 'display:none' css property, it can't work for 'visibility:hidden' css property.

    For Example
    //HTML Elements
    <input type="button" value="Slide UP" class="slideUpBtn" />
    <input type="button" value="Slide Down" class="slideDownBtn" />
    <div id="box"> Test Content here </div>
    
    //Jquery Slide Down Effects Function                            
    $(".slideUpBtn").click(function(){
        $(".box").slideUp(500);
    });
    $(".slideDownBtn").click(function(){
        $(".box").slideDown(500);
    });
    
    slideUp()

    The slideUp() method is similar to hide() method. It is implemented to hide the selected visible content or element. SlideUp() method is only worked in 'display:block' css property, it can't work for 'visibility:visible' css property

    For Example
    //HTML Elements
    <input type="button" value="Slide UP" class="slideUpBtn" />
    <input type="button" value="Slide Down" class="slideDownBtn" />
    <div id="box"> Test Content here </div>
    
    //Jquery SlideUp Effects Function                            
    $(".slideUpBtn").click(function(){
        $(".box").slideUp(500);
    });
    $(".slideDownBtn").click(function(){
        $(".box").slideDown(500);
    });
    
    slideToggle()

    slideToggle() method works between slideUp() and slideDown() method. Gradually slideToggle() allows reversable effect while the element have slideDown() or slideUp() mode.

    For Example
    //HTML Elements
    <input type="button" value="SlideToggle" class="slideToggleBtn" />
    <div id="box"> Test Content here </div>
    <div id="box01"> Test Content here </div>
    <div id="box02"> Test Content here </div>
    
    //Jquery SlideToggle Effects Function                            
    $(".slideToggleBtn").click(function(){
        $("#box").slideToggle(700);;
        $("#box 01").slideToggle(1000);;
        $("#box 02").slideToggle(1500);;
    });
    
    stop()

    Stop() method implement to end or close the event for selected element. Unlike finish() method, stop method only perform for stopping or ending the animation.

    For Example
    //HTML Elements
    <input type="button" value="Start Animation" class="startBtn" />
    <input type="button" value="Finish Animation" class="stopBtn" />
    <div id="box"> Test Content here </div>
    
    //Jquery "Stop" Effects Function                            
     $(".startBtn").click(function(){
        $(".box").animate({height: 300}, 3000);
        $(".box").animate({width: 300}, 3000);
    });
    $(".stopBtn").click(function(){
        $(".box").stop(600);
    });
    
    toggle()

    Toggle() method is a composition of show() and hide() method. It's basically work in both manner for selected elements. Basically this method approach toward the element visiblity. Toggle method works in reversble mode for showing and hiding content as per the visibility.

    For Example
    //HTML Elements
    <input type="button" value="Toggle" class="toggleBtn" />
    <div id="box"> Test Content here </div>
    <div id="box01"> Test Content here </div>
    <div id="box02"> Test Content here </div>
    
    //Jquery Toggle Effects Function                            
    $(".slideToggleBtn").click(function(){
        $("#box").toggle(700);;
        $("#box 01").toggle(1000);;
        $("#box 02").toggle(1500);;
    });
    
    End of this Session

    I hope this session will be helpful for you. Please use the above example to see the exact demo for more understanding.

    In this session, I have covered little bit about jquery and jquery effects with example. In next session we'll cover jquery in more detail.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: