获取元素ID为动画jQuery

我有一个精灵图像比mouseenter/mouseleave发生在其上，背景位置changes.This工作到目前为止，虽然有可能是一个更有效的方式来做到这一点。然而，我有几个图像需要做到这一点，并试图找到一种方法，将图像的id提供给jQuery而不是重复的代码。
的HTML：获取元素ID为动画jQuery

<div class='featSmallBox' id='featSmallImg2'> 
</div>

图像源是利用CSS布置。
这是我迄今为止的jQuery。

$("#featSmallImg2").mouseenter(function(){ 
        $(this).animate({ 
        backgroundPositionX:"100%" 
        }); 
        }); 

$("#featSmallImg2").mouseleave(function(){ 
        $(this).animate({ 
        backgroundPositionX:"0%" 
        }); 
        });

理想情况下，我需要在什么被动态的的mouseEntered id来养活，但一切我试过似乎并没有工作。
道歉，如果这几乎没有意义。我是jQuery和这个网站的新手。

来源

2013-10-17 Shamrockonov

我认为你的代码有一个错字！不是吗？ 'mouseenter（）'和'mouseleave（）'没有关闭:)是你的实际代码吗？ –

@DhavalMarthak他的代码是正确的。这两个事件分别在第4行和第8行关闭！ – Flux

@DhavalMarthak你是对的！只是忘了把它们放在这里出于某种原因 – Shamrockonov

如果jQuery代码对于包含精灵的所有div都是相同的，请尝试将jQuery中的$("#featSmallImg2")更改为$(".featSmallBox")。这样，所有与.featSmallBox类别的div都将具有此功能。

来源

2013-10-17 09:07:48 Flux

这个解决方案马上工作！然而，稍后我会在图片上滑动文字（每个图片的文字也不同），当我这样做时，它会滑动所有图片的文字，而不仅仅是徘徊的文字。我应该把这个真的.. – Shamrockonov

@Shamrockonov我会建议，然后你标记我的答案是正确的（通过点击答案左边的空白勾）来关闭这个问题，然后发布一个新的问题，详细说明你想要的滑动文本起作用，因为如果您开始编辑当前问题（并且所有答案将变得无关紧要），它会变得有点麻烦。如果您希望在此之前进一步讨论此问题，或者不发布新问题，您也可以向我发送一封邮件。 – Flux

请与event.target

$("body").mouseenter(function(event) { 
    console.log("mouseentered id: " + event.target.id); 
});

来源

2013-10-17 09:08:30

$("div[id^='featSmallImg']").mouseenter(function(){ 
        $(this).animate({ 
        backgroundPositionX:"100%" 
        }); 
        }); 

$("div[id^='featSmallImg']").mouseleave(function(){ 
        $(this).animate({ 
        backgroundPositionX:"0%" 
        }); 
        });

试试这个代码。事件将被称为所有div的编号以'featSmallImg'开头

来源

2013-10-17 09:36:04

只有在动画之后的背景位置对所有分区应该相同时才有效。 –

获取元素ID为动画jQuery

回答

相关问题