jube-fork/Jube.App/wwwroot/kendo/examples/fx/replace.html

<!DOCTYPE html>
<html>
<head>
    <title>Replace</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">

        <div class="demo-section wide">
            <div id="placeholder">
                <img id="home0" src="../content/web/fx/replace/home1.jpg" />
                <img id="home1" style="display: none" src="../content/web/fx/replace/home2.jpg" />
                <img id="home2" style="display: none" src="../content/web/fx/replace/home3.jpg" />
            </div>
            <ul id="homes">
                <li><a id="thumb1" data-index="0" href="#"><span>Home 1</span></a></li>
                <li><a id="thumb2" data-index="1" href="#"><span>Home 2</span></a></li>
                <li><a id="thumb3" data-index="2" href="#"><span>Home 3</span></a></li>
            </ul>
        </div>

        <script type="text/javascript" charset="utf-8">
            $(function() {
                var index = 0,
                    currentEffect;

                $("#homes a").click(function(e) {
                    e.preventDefault();
                    var target = parseInt($(this).data("index"));
                    if (target === index) {
                        return;
                    }

                    if (currentEffect) {
                        currentEffect.stop();
                    }
                    $("#home" + target).show();
                    currentEffect = kendo.fx("#home" + target).replace("#home" + index, "swap");
                    currentEffect.run();
                    index = target;
                });
            });

        </script>
        <style>
            #placeholder {
                display: inline-block;
                width: 500px;
                height: 333px;
                position: relative;
            }
            #placeholder img {
                position: absolute;
            }

            #homes {
                display: inline-block;
                width: 160px;
                height: 333px;
                list-style: none;
                margin: 0;
                padding: 0;
            }
            #homes li {
                margin: 0;
                padding: 0;
            }
            #homes li a {
                display: block;
                width: 160px;
                height: 109px;
                margin: 3px 0;
                box-shadow: inset 0 0 10px rgba(0,0,0,.5);
            }
            #homes li a:hover {
                box-shadow: inset 0 100px 100px rgba(0,0,0,.3);
            }
            #homes li a#thumb1 {
                margin: 0 0 3px;
            }
            #homes li a span {
                display: none;
            }

            #thumb1 {
                background: url('../content/web/fx/replace/t1.jpg') no-repeat left top;
            }
            #thumb2 {
                background: url('../content/web/fx/replace/t2.jpg') no-repeat left top;
            }
            #thumb3 {
                background: url('../content/web/fx/replace/t3.jpg') no-repeat left top;
            }

            /**
             * Custom swap effect
             */

            /* the initial position of the next div */
            .k-fx-swap.k-fx-start .k-fx-next {
                -webkit-transform: translatex(100%);
                -moz-transform: translatex(100%);
                -ms-transform: translatex(100%);
                transform: translatex(100%);
            }

            /* the initial position of the next div */
            .k-fx-swap.k-fx-end .k-fx-current {
                opacity: 0;
                -webkit-transform: scale(0.9);
                -moz-transform: scale(0.9);
                transform: scale(0.9);
            }


            /* Reverse animation */

            /* the initial position of the next div */
            .k-fx-swap.k-fx-reverse.k-fx-start .k-fx-next {
                opacity: 0;
                -webkit-transform: scale(0.9);
                -moz-transform: scale(0.9);
                transform: scale(0.9);
            }

            /* the initial position of the next div */
            .k-fx-swap.k-fx-reverse.k-fx-end .k-fx-current {
                opacity: 1;
                -webkit-transform: translatex(100%);
                -moz-transform: translatex(100%);
                transform: translatex(100%);
            }

        </style>
</div>


    
</body>
</html>