Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <!-- Animate.css v3.5.2 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
</head>
<body>
    <div class="animated bounce" id="example">Hello World</div> 
    <!-- 
        類別設定[註1]
        animated: 啟動動畫
​
        效果類別清單[註2]
        bounce: 彈跳
    -->
    <!-- jQuery v1.9.1 -->
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <!-- jQuery animateCss Extend -->
    <script>
        $.fn.extend({
            animateCss: function ( animationName, callback )
            {
                var animationEnd = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
                this.addClass( "animated " + animationName ).one( animationEnd, function() {
                    $(this).removeClass( "animated " + animationName );
                    if (callback) callback();
                });
                return this;
            }
        });
    </script>
    <!-- #example動畫結束後執行此事件 -->
    <script>
        $( "#example" ).animateCss( "bounce", function () {
            $(  "#example" ).css( "color", "red" );
        });
    </script>
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
hsuehmingfangpro
0viewers