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
        });
    });
});

Answer 2

当然！

我用你的jsFiddle作为例子。试试这个：

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

Answer 3

您可以为此目的在图片上添加一个类，试试这个：

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

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

3 个答案: