ajax jquery 轮盘旋转抽奖无动画效果

[香蕉猪]

html中的body：

<!--真正需要的效果-->
<div class="demo"> 
	<div id="disk"></div> 
	<div id="start"><img src="./img/turntable/2.png" id="startbtn" 
			style="-webkit-transform: rotate(231deg); -webkit-transform-origin: 50% 50%;"></div> 
</div> 
<!-- 用于实验的效果-->
<div class="demo"> 
	 <div id="start2"><img src="./img/turntable/2.png" id="startbtn2" 
			style="-webkit-transform: rotate(231deg); -webkit-transform-origin: 50% 50%;"></div> 
</div> 

导入的相关js

		<script type="text/javascript" src="./jQuery/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="./jQuery/jQueryRotate.js"></script>
		<script type="text/javascript" src="./jQuery/jquery.masonry.min.js"></script>
		<script type="text/javascript" src="./jQuery/jquery.easing.min.js"></script>
		<script type="text/javascript" src="./js/json2.js"></script>

用于实验部分的页面脚本代码

		$(function(){
			//alert('into function'); 
		    $("#startbtn2").rotate({ 
		        bind:{ 
		            click:function(){//绑定click单击事件 
		            	//alert('into click'); 
		                 var a = Math.floor(Math.random() * 360); //生成随机数 
		                 $(this).rotate({ 
		                         duration:6000,//转动时间间隔（转动速度） 
		                         angle: 0,  //开始角度 
		                        animateTo:3600+a, //转动角度，10圈+ 
		                        easing: $.easing.easeOutSine, //动画扩展 
		                        callback: function(){ //回调函数 
		                            alert("中奖了!"); 
		                        } 
		                 }); 
		            } 
		        } 
		    }); 
		});

这部分可正常执行动画效果。

真正需要部分的页面脚本代码

		$(document).ready(function(){
			$("#startbtn").bind("click",function(){
				gogo();
			});
		}); 
		
		function gogo(){
			var urlStr="Turntable.do"; 
			//alert("ajax");
			$.ajax({
				type:"POST", //提交數據的類型
				url:urlStr, //提交請求的地址
				dataType:"json", //返回的數據格式
				cache:false,
				
				error:function(){
					alert("error");
					return false;
				},
				success:function(data){succ(data);}
			});
		}
		
		function succ(data){
			//alert('success'+data);
			$("startbtn").unbind("click").css("cursor","default");
			var a = data.angle;	//角度
			var p = data.prize;	//獎項
			var msg = data.msg; //提示信息
			alert("a:"+a+";p:"+p+";m:"+msg);
			$("startbtn").rotate({
				duration:4000, //轉動時間
				angle:0,
				animateTo:3600+a, //轉動角度
				easing: $.easding.easeOutSine,
				callback:function(){
					alert("這裡是回調函數");
					var con = confirm("恭喜您,中得"+p+"\n還要再來一次嗎?");
					if(con){
						alert("into");
					}else{
						return false;
					}
				}
			})
		}

代码直至运行到succ方法中的alert部分都正常,alert的返回数据类似 a:33;p:4;m:继续努力继续运行页面无动画效果。

运用Google浏览器查看Js脚本运行情况如图：

现在想请教为何我所需要部分的动画效果没有正常执行？，明明用于实验的部分没有任何问题呀！

[斯洛文尼亚旅游]

easing: $.easing.easeOutSine, //动画扩展 easing: $.easding.easeOutSine, 楼猪。。。。 还有一个问题就是你的demo选择器为$("#startbtn2")，实际用的时候为$("startbtn").rotate({，绑定事件的对象对了没有？。。

[香蕉猪]

引用 1 楼 showbo 的回复:

easing: $.easing.easeOutSine, //动画扩展 easing: $.easding.easeOutSine, 感激不尽，easding真的是一个大问题！但仍没有动画效果 还有一个问题就是你的demo选择器为$("#startbtn2")，实际用的时候为$("startbtn").rotate({，绑定事件的对象对了没有？。。

绑定事件是没有问题的，我demo选择器“#startbtn2”用的是

		$(function(){
			//alert('into function'); 
		    $("#startbtn2").rotate({ 
		        bind:{ 
		            click:function(){//绑定click单击事件 
		            	//alert('into click'); 
		                 var a = Math.floor(Math.random() * 360); //生成随机数 
		                 $(this).rotate({ 
		                         duration:6000,//转动时间间隔（转动速度） 
		                         angle: 0,  //开始角度 
		                        animateTo:3600+a, //转动角度，10圈+ 
		                        easing: $.easing.easeOutSine, //动画扩展 
		                        callback: function(){ //回调函数 
		                            alert("中奖了!"); 
		                        } 
		                 }); 
		            } 
		        } 
		    }); 
		});

这段事件脚本，这段是可以正常运行的！

[香蕉猪]

感激1楼的回复，现问题
已解决

出现的新问题是：jQueryRotate.js

[斯洛文尼亚旅游]

实验部分你导入了下面红色的js文件没有？怕是冲突了 <script type="text/javascript" src="./jQuery/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="./jQuery/jQueryRotate.js"></script> <script type="text/javascript" src="./jQuery/jquery.masonry.min.js"></script> <script type="text/javascript" src="./jQuery/jquery.easing.min.js"></script> <script type="text/javascript" src="./js/json2.js"></script>

[香蕉猪]

引用 4 楼 showbo 的回复:

实验部分你导入了下面红色的js文件没有？怕是冲突了 <script type="text/javascript" src="./jQuery/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="./jQuery/jQueryRotate.js"></script> <script type="text/javascript" src="./jQuery/jquery.masonry.min.js"></script> <script type="text/javascript" src="./jQuery/jquery.easing.min.js"></script> <script type="text/javascript" src="./js/json2.js"></script>

没有没有，，，没有冲突。。。我在您跟朋友的帮助下，现在问题已经解决了。。。。 谢谢您的热情相助！我将在明天结贴，留出一小半的分给大家做围观奖励。其余的将全部给您！多谢！

[香蕉猪]

任意回复赠分啦！

[zhjdg]

好啊，接分

[嘻哈大咖秀]

好啊，接分

[liuxingfffff]

好热闹啊 ，我也来一脚

[GOLF_R20]

好啊，接分

[wz_307]

转盘效果...如果是简单效果可以自己做哦~

[一路记忆]

捞分来了，嘿嘿

[23glh]

好啊，接分

[qingyazhi2010]

怎么解决的啊？？