Different animations with options

by Berat Emre Nebioğlu

HTML

<div>
<svg id="id" xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
</div>
<button id="show">Show</button><br/>
<button id="fast">Fast</button><br/>
<button id="slow">Slow</button><br/>
<button id="slow400">Slow 400</button><br/>
<button id="slow400WithFunc">Slow 400 with console log</button><br/>
<button id="fadeOut">Fade Out</button><br/>
<button id="fadeOut400">Fade Out 400</button><br/>

CSS

#id {
    height: 200px;
    width: 200px;
}

JavaScript

$(function() {

    $('#show').click(function() {
        $('#id').show();
    });

    $('#fast').click(function() {
        $('#id').hide();
    });
    
    $('#slow').click(function() {
        $('#id').hide('slow');
    });

    $('#slow400').click(function() {
        $('#id').hide(400);
    });

    $('#slow400WithFunc').click(function() {
        $('#id').hide(400, function() {console.log('done')});
    });

    $('#fadeOut').click(function() {
        $('#id').fadeOut();
    });

    $('#fadeOut400').click(function() {
        $('#id').fadeOut(400);
    });

});