我有一组div-s,我需要应用一些jQuery。
<div id="anim1" class="animation"></div>
<div id="anim2" class="animation"></div>
它看起来很简单,但我想让它更灵活一点。不过可能是不可能的......但是,我没有像我拥有的层那样多次复制和粘贴 jQuery 函数,我想知道是否有任何方法可以从鼠标悬停操作中获取层名称并将其放入我可以在以下脚本中使用的变量中:
$(document).ready(function() {
$('.animation').mouseover(function() {
layer = '#'+this.id;
});
var steps = [0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1050, 1100, 1150, 1200, 1250, 1300, 1350, 1400, 1450, 1500, 1550, 1600, 1650, 1700, 1750, 1800, 1850, 1900, 1950, 2000, 2050, 2100, 2150, 2200, 2250, 2300, 2350, 2400, 2450, 2500, 2550, 2600, 2650, 2700, 2750, 2800, 2850, 2900, 2950,];
var index = -1;
setTimeout(function() {
index++;
if(index == 57) {
index = 0;
}
$(layer).hover(function(){
index ++;
}, function(){
index -=1;
});
$(layer).css('backgroundPosition', '-' + steps[index] + 'px 0px');
setTimeout(arguments.callee, 50);
}, 25);
});
我想知道我在这里做错了什么。任何想法都非常感谢...
更新。尝试在 $(document).ready(function() 中声明变量。我不确定我是否可以做到这一点,但至少动画现在正在移动。唯一的问题是,当我将鼠标悬停在它们中的任何一个上时,两者都会停止。
$(document).ready(function() {
layer = $('.animation').mouseover(function() {
'#'+this.id;
});
你来了,伙计...
小提琴
$('.animation').each(function() {
var anim = $(this);
var steps = [0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1050, 1100, 1150, 1200, 1250, 1300, 1350, 1400, 1450, 1500, 1550, 1600, 1650, 1700, 1750, 1800, 1850, 1900, 1950, 2000, 2050, 2100, 2150, 2200, 2250, 2300, 2350, 2400, 2450, 2500, 2550, 2600, 2650, 2700, 2750, 2800, 2850, 2900, 2950 ];
var index = -1;
setTimeout(function() {
index++;
if (index == 57) {
index = 0;
}
anim.hover(function() {
index++;
}, function() {
index -= 1;
});
anim.css('backgroundPosition', '-' + steps[index] + 'px 0px');
setTimeout(arguments.callee, 50);
}, 25);
});
鼠标悬停功能的作用域之外设置一个变量,然后将 $(this) 分配给函数内的该变量
变个;
$('.animation').mouseover(function() {
that = $(this);
});
然后使用它来引用外面的元素。我不确定你在这里想做什么,但这是"传递元素"的一种方法。
当你不打算为每个div复制你的函数时,我会使用jQuery每个
我会给每个div 一个类名:
<div class="anim" class="animation"></div>
<div class="anim" class="animation"></div>
然后为每个元素分配效果:
$('.anim').each(function(index_each, element) {
var steps = [0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1050, 1100, 1150, 1200, 1250, 1300, 1350, 1400, 1450, 1500, 1550, 1600, 1650, 1700, 1750, 1800, 1850, 1900, 1950, 2000, 2050, 2100, 2150, 2200, 2250, 2300, 2350, 2400, 2450, 2500, 2550, 2600, 2650, 2700, 2750, 2800, 2850, 2900, 2950,];
var index = -1;
setTimeout(function() {
index++;
if(index == 57) {
index = 0;
}
$(element).hover(function(){
index ++;
}, function(){
index -=1;
});
$(element).css('backgroundPosition', '-' + steps[index] + 'px 0px');
setTimeout(arguments.callee, 50);
}, 25);
});