如何在JQuery中使用.class设置动画?
我可以设置#ID Div标记的动画以四处移动,但我不能调用.class Div标记来移动。我怎样才能正确地做到这一点如何在JQuery中使用.class设置动画?,jquery,animation,svg,Jquery,Animation,Svg,我可以设置#ID Div标记的动画以四处移动,但我不能调用.class Div标记来移动。我怎样才能正确地做到这一点 .myClass { width: 40px; height: 40px;float:left;padding: 1px; margin:3px; position:absolute; left:50px; top:60px; background:blue; color:white; } 在
.myClass {
width: 40px; height: 40px;float:left;padding: 1px; margin:3px;
position:absolute; left:50px; top:60px; background:blue; color:white;
}
在HTML中:
<div class="myClass">Insert image2</div>
<div class="myClass"><img src="jef-frog.gif"width="50">DIV myCLASS</img></div>
function randomRange(min,max) {
return Math.random() * (max-min) + min;
}
/* Generate some random starting position */
var startmyClassX = randomRange(50,100);
var startmyClassY = randomRange(50,100);
var item2 = $(".myClass"),cycle1;
function runItem2() {
/* Set a the starting position to be random by editing the css */
$(".myClass").css("left", startItem2X+"px");
$(".myClass").css("top", startItem2Y+"px");
$(".myClass").svg(onLoad);
(cycle2 = function() {
var m = randomRange(50,100);
var n = randomRange(75,150);
myClass.animate({top:'+='+m, left:'+='+n},2000);
myClass.animate({left:'-='+n},2000);
myClass.animate({left:'+='+n, top:'-='+n},2000);
myClass.animate({left:'-='+n},2000)
myClass.animate({top:'+='+m},2000,cycle2)
})();
}
runItem2();
插入图像2
我的班级
函数随机范围(最小值、最大值){
返回Math.random()*(max-min)+min;
}
/*生成一些随机的起始位置*/
var StartMyCyclassx=随机范围(50100);
var startmyClassY=随机范围(50100);
var item2=$(“.myClass”),循环1;
函数runItem2(){
/*通过编辑css将起始位置设置为随机*/
$(“.myClass”).css(“左”,startItem2X+“px”);
$(“.myClass”).css(“top”,startItem2Y+“px”);
$(“.myClass”).svg(onLoad);
(cycle2=函数(){
var m=随机范围(50100);
var n=随机范围(75150);
动画({top:'+='+m,left:'+='+n},2000);
动画({左:'-='+n},2000);
动画({left:'+='+n,top:'-='+n},2000);
动画({left:'-='+n},2000)
动画({top:'+='+m},2000,cycle2)
})();
}
runItem2();
谁能帮助解决这个问题?谢谢您有一个变量
var item2=$(“.myClass”)
,但是稍后在您的代码中,您应该使用item2
您使用了myClass
:
myClass.animate({top:'+='+m, left:'+='+n},2000);
...
myClass.animate({top:'+='+m},2000,cycle2)
将变量重命名为myClass
,或将后面的代码更改为使用item2
。(您还声明了一个变量cycle1
,然后使用cycle2
)
请注意,您提供给的回调将在每个正在设置动画的元素中调用一次,因此使用$(“.myClass”)
匹配两个元素,您将在每次重新启动循环时将动画的数量加倍
另外请注意,在演示中,有两个元素是独立移动的,但是如果您使用同一个动画函数使用相同的类来设置所有元素的动画,那么所有元素都将以相同的方式移动。代码中存在许多语法错误。什么是startItem2X?什么是
svg
插件?startItem2X我正在尝试设置imagePatrick的X位置,但当我尝试设置DIV ID标记的动画时。。。它会移动。请参阅演示>>@PatrickKlug-上有使用+=
和-=
的示例。我可以知道如何更好地设置多个图像的动画吗?