Javascript jQuery插件渲染问题 [英] Javascript jQuery plugin rendering problems
问题描述
这是我的问题.在 http://lab.smashup.it/flip/中有一个漂亮的插件.我设法实现了它，但是出于某种奇怪的原因，我只获得了动画的前半部分，第二部分只是不可见(或隐藏)，然后跳到最后.为了使事情变得更加有趣，在某个时候一切都工作正常，但是突然之间就没有了.当然，我会尽可能地追溯到一切正常时，同样的问题.我似乎找不到问题的根源.如果有人可以，请通过测试插件并告诉我他们是否能够渲染完整的动画来帮助我.对于我的HTML，我将其基于插件演示页面的源代码进行确认，但无济于事.
Here is my problem. There's a nifty looking plugin here http://lab.smashup.it/flip/ which flips things around. I managed to implement it, but for some odd reason I'm only getting the first half of the animation rendered, the second part is just invisible (or hidden) and then it jumps to the end. To make things even more fun, everything was working fine at some point but then suddenly not. I of course backtracked as far back as possible back to when things were fine, and same problem again. I can't seem to locate the source of the problem. If someone could just please help me out by testing out the plugin and telling me if they managed to get a full animation rendered. For my HTML I based it on the source code of the plugin demo page to make sure, but to no avail.
<!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>
对于那些认识到此问题的人，在没有被建议这样做之前，我确实尝试避免发布新主题，因为没有人读过旧帖子.我也已将我的初始帖子标记为删除.
For those of you who recognize this problem, I did try to avoid posting a new thread until I was advised to do so as no one was reading the old post. I've also flagged my initial post for deletion.
推荐答案
您发布的内容没有错，我设置了一个小提琴，它很好用，但是那是在我注意到您没有包括您的内容时JS正确.我认为这是问题所在.
Nothing wrong with the basics of what you posted, I set up a quick fiddle and it worked fine, but that was when I noticed that you have not included your JS correctly. I think the issue is with that.
首先，您要使用google.load从Google提取jQuery.然后，您从jQuery.com获得了一个(可能不同的)版本.另外，flip依赖于jQuery UI，我看不到您将其导入到您发布的html代码段中的任何位置.
First you are pulling in jQuery from google using google.load. Then you are getting a (potentially different) version from jQuery.com. Also, flip relies on jQuery UI, and I can't see you importing that anywhere in the html snippet you posted.
为什么不尝试这样做，摆脱google.load和jQuery.com的源代码，看看是否可行.
Why don't you try this and get rid of the google.load and jQuery.com sources and see if that works.
<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>
这篇关于Javascript jQuery插件渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
