Question

我们如何修改使用javascript修改后的圆圈？这是我的jQuery

$("#circle").hover(function(){
            $(this).animate({width:"500px",
                     height:"500px",
                     borderRadius:"250px",
                     marginLeft:"300px",
                     marginTop:"200px"},1500);      
    },
    function(){
    $("#circle").css("width","200px");
    });

Answer 1

使用CSS转换执行动画并添加/删除类以创建悬停效果。

在JS中：

$('#circle').hover(function(){
    $(this).addClass('hovering');
}, function() {
    $('#circle').removeClass('hovering');
});

在CSS中：

#circle {
    width: 200px;
    transition: 1.5s all linear;
}
#circle.hovering {
    height:"500px";
    borderRadius:"250px";
    marginLeft:"300px";
    marginTop:"200px;
}

Answer 2

如果您的目的是仅在悬停时更改圆的属性，我建议使用css过渡来为已更改的属性设置动画，并仅在悬停时使用jquery添加其他类。

CSS：

#circle{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.circle-normal {
    // any properties you want your original circle to have
}

.circle-hovered {
    width: 500px;
    height: 500px;
    border-radius: 250px;
    margin-left: 300px;
    margin-top: 200px;
}

jQuery的：

$('#circle').hover(
       function(){ $(this).addClass('circle-hovered') },
       function(){ $(this).removeClass('circle-hovered') }
)

注意这个事实是你的圈子类需要稍后在css文件中出现，以便覆盖circle-normal类中的属性。您还必须将circle-normal类添加到#circle。

Answer 3

我相信您正在询问如何停止动画，以便在用户不再悬停在元素上时可以成功重置其大小。您需要通过调用$("#circle").stop(true, false)手动停止动画，否则您在动画期间所做的任何更改都将被覆盖：

$("#circle").hover(function(){
        $(this).animate({width:"500px",
                 height:"500px",
                 borderRadius:"250px",
                 marginLeft:"300px",
                 marginTop:"200px"},1500);      
},
function(){
$("#circle").stop(true, false);
$("#circle").css("width","200px");
});

请参阅：.stop() | jQuery API Documentation

Answer 4

你必须找到一种方法来记住＆＃34;动画发生之前这5个css参数的值......

假设您已经拥有这些信息，因为圈子是动态创建的，或者您可以尝试使用 $ echo 0: 63616e746765747468697332776f726b | xxd -r \ | openssl enc -aes-128-ecb -nopad -K 00000000000000000000000000000000 | xxd | cut -c10-50 376f 9b54 b53c 7c84 bbb9 c156 d50a ffc7 $ ：

object

这是创建的对象格式：
（以下代码仅供您参考＆＃34; visalize＆＃34;！不要将其包含在您的代码中。）

var circleCSSmemory = {};

$("#circle").on("mouseover",function(){
    circleCSSmemory.width = $(this).css("width");
    circleCSSmemory.height = $(this).css("height");
    circleCSSmemory.borderRadius = $(this).css("borderRadius");
    circleCSSmemory.marginLeft = $(this).css("marginLeft");
    circleCSSmemory.marginTop = $(this).css("marginTop");

    $(this).animate({width:"500px",
        height:"500px",
        borderRadius:"250px",
        marginLeft:"300px",
        marginTop:"200px"
    },1500);      
});

然后，您将能够重新应用之前的CSS参数（全部或仅您需要的参数）。

circleCSSmemory = { width: [value],
                    height: [value],
                    borderRadius: [value],
                    marginLeft: [value],
                    marginTop: [value]
                  };

注意我使用了$("#circle").on("mouseout",function(){ $(this).animate({width:circleCSSmemory.width, height:circleCSSmemory.height, borderRadius:circleCSSmemory.borderRadius, marginLeft:circleCSSmemory.marginLeft, marginTop:circleCSSmemory.marginTop },1500); // You can set a different animation delay ;) });和mouseover个事件而不是CSS mouseout，因为您使用了jQuery :hover ...而且你可能想要在mouseout上设置不同的动画时序和参数。

否则......你也只能使用一个CSS类...这不是那么复杂，但没有提供与animate()

一样多的控制权

如何在javascript修改后显示原始圈子？

4 个答案: