jQuery动画图像旋转
我有一个带有子菜单的导航栏和一个点击箭头,它将关闭子菜单(已经使用jQuery slideToggle()
),我试图使用jQueryRotate.js
慢慢地用菜单旋转箭头。
所以……向上箭头指向菜单缩回,箭头指向下方,菜单显示。 我试过使用jQuery animate()
没有成功。
这是我的小提琴: http : //jsfiddle.net/mYQNL/2/
第一个也是最明显的问题是当菜单缩回时箭头不会向后旋转。
任何帮助将非常感激!
试试吧:
if($(this).hasClass('rot')) { $(this).removeClass('rot').rotate({ duration: 200, angle: 180, animateTo:0 }); } else { $(this).addClass('rot').rotate({ duration: 200, angle: 0, animateTo:180}); };
的jsfiddle
顺便说一句:我建议使用CSS转换而不是jQuery库来旋转图像。
jsFiddle与更正的HTML
我建议你学习HTML和CSS的基础知识,因为如果没有这个,你将永远无法创建一个能够在所有浏览器和设备中完美运行并具有良好性能的网站。
或许看看Codeschool ,他们有一些免费课程,涵盖了基础知识。
你也可以这样做:
var currAngle = $(this).getRotateAngle(); if(currAngle == 180){ $(this).rotate(0); } else{ $(this).rotate(180); }
要更好地控制旋转,请使用:
var currAngle = $(this).getRotateAngle(); if(currAngle == 180){ $(this).rotate({ duration:1300, angle:180, animateTo:0 }); } else{ $(this).rotate({ duration: 1300, angle:0, animateTo: 180 }); }
$("#row-1").click(function(){ value1 += delta1; delta1 = -delta1; $("#image1").rotate({ animateTo:value1}); });
将row-1作为id添加到图像所在的列,然后将图像作为id添加到图像中。