how to display the original circle after it has been modified by javascript?

Question

How can we modify the circle after it has been modified with javascript? Here's my jQuery

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

Answer 1

Use CSS transition to perform animation and add/remove a class to create hover effect.

In JS:

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

In CSS:

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

Answer 2

If your intention is to change the properties of the circle only when you hover, I would suggest using css transitions to animate changed properties, and only add an additional class on hover with 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') }
)

Take note of the fact that your circle-hovered class needs to come later in the css file, in order to override the properties in the circle-normal class. You would also have to add circle-normal class to #circle.

Answer 3

I believe you are asking how to stop the animation so that you can successfully reset its size when the user is no longer hovering over the element. You need to stop the animation manually by invoking $("#circle").stop(true, false) , otherwise any changes you make during the animation will be overwritten:

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

See: .stop() | jQuery API Documentation

Answer 4

You have to find a way to "remember" the values of these 5 css params before the animation occurs...

Assuming you don't already have these infos because the circle is dynamically created or something, you could try to use an 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);      
});

This is the created object format:
(code below is only for you to "visalize"! Don't include it in your code.)

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

You will then be able to re-apply the previous CSS params (all or only the ones you want).

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

Notice that I used mouseover and mouseout events instead of the CSS :hover since you use jQuery animate() ... And that you may want to set a different animation timing and params on mouseout.

Else... You also could only use a CSS class... Which is less complicated, but does not give as much control as animate()