javascript - Html 链接使用 JQuery 仅弹跳一个元素？

Question

我的 Jquery 代码有问题。当您将链接悬停在列表中时，会弹起每个 menu_img 类，但它应该只弹起一个元素。

HTML:

<ul class="menu">
    <li>
        <div class="bounce"></div> <a href="#">Test1</a>
    </li>
    <li>
        <div class="bounce"></div> <a href="#">Test2</a>
    </li>
</ul>

CSS:

ul.menu li {
    list-style-type:none;
}
.bounce {
    position: absolut;
    height: 17px;
    width: 17px;
    margin-left: 5px;
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/a/a0/Arrow_green2.png");
}

JS:

$("ul.menu > li a").hover(function () {
    doBounce(3, '2px', 200);
});


function doBounce(times, distance, speed) {
    for (i = 0; i <times; i++) {
        $(".bounce").animate({
            marginLeft: '-=' + distance
        }, speed)
            .animate({
            marginLeft: '+=' + distance
        }, speed);
    }
}

jsFiddle

Answer 1

您可以像这样将悬停元素传递给 doBounce()

$("ul.menu > li a").hover(function () {
    doBounce($(this),3, '2px', 200); // Pass hovered element as $(this)
});


function doBounce(elementTobounce, times, distance, speed) {
    for (i = 0; i <times; i++) {
        $(elementTobounce).prev(".bounce").animate({
            marginLeft: '-=' + distance
        }, speed)
            .animate({
            marginLeft: '+=' + distance
        }, speed);
    }
}

elementTobounce 是悬停的 a 元素，然后使用 .prev() 引用您的 .bounce 类其图像 -> 将变得动画。

文档:

.prev()

Demo