Demo Fiddle

Question

这是我的问题。这里有一个漂亮的插件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>

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

Answer 1

你发布的内容基本没什么问题，我设置了一个快速的小提琴，它工作正常，但那时我注意到你没有正确地包括你的JS。我认为问题在于此。

首先，您使用google.load从谷歌中提取jQuery。然后你从jQuery.com获得一个（可能不同的）版本。此外，翻转依赖于jQuery UI，我看不到你在你发布的html片段中的任何地方导入。

为什么不试试这个并摆脱google.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>

Answer 2

Demo Fiddle

此插件取决于jquery和jqueryUI，包含在您的代码中

Javascript jQuery插件渲染问题

2 个答案:

Demo Fiddle