jquery - 动画图标并影响其他图标 - jQuery

Question

我发现这个 JSFiddle 符合我的需要，并且正是我正在寻找的。

http://jsfiddle.net/jquerybyexample/usNdK/

但我想给它添加更多的效果。当我将鼠标悬停在一个图标上时，我希望其他 3 个图标也以相反的方向进行动画处理，这可能吗？

此外，我计划用 .svg 文件替换这些图标，我可以对它们应用不透明度，但是当我将鼠标悬停在它们上面时我无法对它们应用颜色。

$(document).ready(function(){
    $("#divSocial a img").css({ opacity: 0.5 });
     $("#divSocial a img").hover(
            function () {
                            $(this).animate({ top: "-15" });
                            $(this).css({ opacity: 1 });
            }, 
            function () {
                            $(this).animate({ top: "0" });
                        $(this).css({ opacity: 0.5 });
            }
        );
});

谢谢!

Answer 1

DEMO FIDDLE

这就是如何让其他的动画向下

我将 .stop() 添加到 .animate({..}) 中，这样如果您非常快地多次经过它，图像就不会一直跳动。

$(document).ready(function () {
    $("#divSocial a img").css({
        opacity: 0.5
    });
    $("#divSocial a img").hover(

    function () {
        $("#divSocial a img").not(this).stop().animate({
            top: "15"
        });
        $(this).stop().animate({
            top: "-15"
        });
        $(this).css({
            opacity: 1
        });
    },

    function () {
        $("#divSocial a img").not(this).stop().animate({
            top: "0"
        });
        $(this).stop().animate({
            top: "0"
        });
        $(this).css({
            opacity: 0.5
        });
    });
});