如何显示被javascript修改后的原始圆圈？

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

我相信你问的是如何停止动画，以便在用户不再徘徊在元素上时可以成功重置其大小。你需要通过调用$("#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 2

使用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 3

如果你的目的是要改变圆的性质只有当你徘徊，我会使用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。

Answer 4

你必须找到一个方法来“记住”的价值这5个CSS PARAMS出现动画之前...

假设你已经没有这些相关信息，因为是动态创建或东西的圈子，你可以尝试使用object：

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

这是创建的对象格式：
（以下代码仅供您“visalize”！不包括在你的代码。）

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

然后，您将可以重新申请之前的CSS PARAMS（全部或只有你想要的那些）。

$("#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 ;) 
}); 

注意我使用了CSS :hover的mouseover和mouseout事件，而不是因为你使用jQuery animate() ...那你可能要设置一个不同的动画时间，而params鼠标移开时。

否则......你也可以只使用一个CSS类...这是不太复杂，但并没有给尽可能多的控制，animate()