JSFiddle - React, Tailwind, and code Playground

by Ting-Yuan Chang

HTML

<a href="#abc" class="anchorWithAnimation">click me to go abc</a>
<div id="animateDemo">I will disappear if you click the link "abc"</div>
<br/>
<br/>
<br/>
<br/>
<a href="https://jsfiddle.net" class="anchorWithAnimation">click me to redirect to jsfiddle</a>
<br/>

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<a name="abc"><h1>abc</h1>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce felis felis, semper sit amet mollis eget, rhoncus semper odio. Mauris hendrerit sollicitudin leo, et ullamcorper orci vestibulum in. Quisque ex magna, rhoncus sit amet velit ac, scelerisque placerat lectus. Aenean et vulputate lacus, et semper sapien. Integer id pharetra nunc. Fusce nec risus vitae magna blandit facilisis. Donec magna urna, sagittis et ex ut, congue tempus sem. Donec sollicitudin rhoncus aliquam. Etiam varius mi at nisl ullamcorper volutpat a non ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        
        Vestibulum at ante eu arcu pretium egestas sit amet ut sem. Vestibulum eleifend sapien ut lectus posuere faucibus. Donec felis enim, tristique lacinia dui et, rhoncus laoreet erat. Quisque dui magna, pharetra ut purus ac, mollis congue nisi. Nunc diam mi, luctus quis dolor nec, lobortis auctor quam. Maecenas laoreet, justo at sollicitudin tempor, lectus purus pretium justo, placerat tempor purus est in sem. Maecenas in semper nunc, sed iaculis elit. Nullam quis porttitor purus.
        
        Sed nec elit quis est sollicitudin mollis. Ut arcu orci, convallis nec nunc et, elementum placerat elit. Donec lobortis vehicula arcu vel tempus. Integer interdum in nisi non pellentesque. Cras ante dui, semper ut ex a, aliquam aliquet arcu. Proin et nisi id enim efficitur bibendum a ac sem. Nam mollis tellus arcu, et aliquet...

CSS

#animateDemo { 
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    background: steelblue;
}

JavaScript

$(".anchorWithAnimation").click(function(e) {
    e.preventDefault();
    anchor = this;
    
    // wait 1 second animation
    $("#animateDemo").slideUp(1000, function() { 
        window.location.href = anchor.href;
        
        // demo用的額外部分，可以忽略
        if(anchor.href.indexOf('#') != -1)
            $(this).show();
    });
});