JQuery – fadeIn(), slideToggle(), slideUp(), animate()

Posted on Posted in VBA \ Excel Tagged with , ,

While I am on the JQuery subject, with the previous article for the table game, I have decided to enrich it a little. 🙂

Thus, adding some nice animation functions for JQuery – fadeIn(); slideToggle(); slideUp, animate() and their back functions.

table_game2

What is interesting about these functions? They work pretty well and only the animate() function probably deserves a little more attention, because we may use it in a chain – e.g. in the example I am animating the increasing and the decreasing of the jellyfish as two functions, triggered with the button “Animate”.

Pretty much that is all. Here comes the code:

<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function(){
        $("img").click(function(event){
            $("#information").html("You clicked over an image <hr>"); 
        });
        
        $("img").mousemove(function(event){
            var coordinates = ""+ event.pageX + "< -- >" + event.pageY + "";
            $("#information").html("You are moving over an image <hr>" + coordinates); 
        });
        
        $("img").mouseout(function(event){
            $("#information").html("Test"); 
        });
                
        $("#information").mousemove(function(event){
            $(this).html("<i>Can you find how to start Youtube?</i>");
        })
        
        $("#btn1").click(function(){
            $("img").slideUp("slow"); 
        });
        
        $("#btn2").click(function(){
            $("img").slideDown("fast"); 
        });
        
        $("#btn3").click(function(){
            $("#i2").slideToggle(1000);
            $("#i3").slideToggle(100000);
        });

        $("#btn4").click(function(){
            $("#information").fadeIn();
        });
        
                
        $("#btn5").click(function(){
            $("#information").fadeOut();
        });
        
        $("#btnA").click(function(){
            $("#i2").animate({
                width: "100%",opacity: 0.5},{duration:2000})
                .animate({
                width:"40%",opacity:0.9},{duration:2000});
        });
    });
</script>
    
</head>
<body>
    <h1>VitoshAcademy.Com Table Game</h1>
    <table border = "1" align="center">
    
    <tr>
        <td><button id="btn1">Slide Down</button></td>
        <td><img src="images/i2.jpg" id="i2" height="40%"/></td>
    </tr>
    
    <tr>
        <td><img src="images/i3.jpg" id="i3" height="40%"/></td>
        <td id="information" bgcolor="lightblue"></td>
    </tr>        
    
    <tr>
        <td><button id="btn2">Slide Up</button></td>
        <td><button id="btn3">Toggle</button></td>
    </tr>        
    <tr>
        <td><button id="btn4">Fade in</button></td>
        <td><button id="btn5">Fade Out</button></td>
    </tr>  
    <tr>
        <td><button id="btnA">Animate</button></td><td>Advertise here!</td>
    </tr>       
    </table>
</body>
</html>

Enjoy it also in GitHub. 🙂