Javascript jQuery插件渲染问题

Javascript jQuery plugin rendering problems

本文关键字：问题 插件 jQuery Javascript      更新时间：2023-09-26

我的问题是。这里有一个漂亮的插件http://lab.smashup.it/flip/，它把事情颠倒过来。我设法实现了它，但由于一些奇怪的原因，我只渲染了动画的前半部分，第二部分是不可见的(或隐藏的)，然后跳到最后。为了让事情变得更有趣，所有的事情在某个时候都很顺利，但突然就不行了。当然，我尽可能地回溯到一切正常的时候，同样的问题又出现了。我似乎找不到问题的根源。如果有人可以只是请帮助我测试出插件，并告诉我如果他们设法得到一个完整的动画渲染。对于我的HTML，我基于插件演示页面的源代码来确保，但无济于事。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test#0935</title>
    <script src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        // Load jQuery 
        google.load("jquery", "1");
    </script>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="JS/jquery.flip.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#id1").bind("click", function() {
                $("#flipo").flip({
                    direction: "bt"
                })
                return false;
            });
        });
    </script>
    <style type="text/css">
        #flipo {
            width:100px;
            height:70px;
            background-color:lightblue;
            margin:20px;
        }
    </style>
</head>
<body>
    <div id="flipo"></div>
    <div id="id1">left</div>
</body>
</html>

对于那些认识到这个问题的人，我确实试图避免发布一个新的帖子，直到我被建议这样做，因为没有人在阅读旧的帖子。我还标记了我最初的帖子要删除

你发布的基础知识没有什么问题，我设置了一个快速的小提琴，它工作得很好，但那是当我注意到你没有正确地包括你的JS。我认为问题就在这里。

首先你从谷歌使用google.load拉jQuery。然后您将从jQuery.com获得一个(可能不同的)版本。此外，flip依赖于jQuery UI，我看不到你在你发布的html片段的任何地方导入它。

你为什么不试试这个，摆脱谷歌。load和jQuery.com源代码，看看是否有效。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="JS/jquery.flip.js"></script>

Demo小提琴

这个插件依赖于jquery和jqueryUI，包括在你的代码

相关文章：