Why is my div not returning to normal when my mouse leaves the area?

Question

I'm using some javascript to increase the size of a div when a mouse enters the target area, but then I want it to return to normal size when the mouse leaves the targeted area.

Not sure what is wrong with my code.

$(document).ready(function() {
$(".someContent").on("mouseenter", function() {
    $(this).toggleClass("highLight");
    if ($(this).hasClass('highLight')) {
    $(this).animate({"width": "80%", "height": "200px", "opacity": "1"}, "fast");
} else {
    $(this).animate({"width": "30%", "height": "60px", "opacity": "1"}, "fast");
}
$(".someContent").on("mouseleave", function() {
    $(this).toggleClass("highLight");
});
});
})

I have it working now with

$(document).ready(function() {
$(".someContent").on("mouseenter", function() {
    $(this).toggleClass("highLight");
    if ($(this).hasClass('highLight')) {
        $(this).animate({"width": "80%", "height": "200px", "opacity": "1"}, "fast");
    } else {
        $(this).animate({"width": "30%", "height": "60px", "opacity": "1"}, "fast");
    }
}).on("mouseleave", function() {
    $(this).toggleClass("highLight");
});
})

I feel like there is a better way. I'm trying to use javascript over css to learn javascript.

Answer 1

Since you're using jQuery, you might want to try something a bit less clumsy:

$(".someContent").hover( function() {
    $(this).toggleClass("highLight");

}
, function() {
    $(this).toggleClass("highLight");
});

And use CSS transitions (if you can) to trigger the effects:

.someContent {
    width: 300px;
    height: 300px;
    background: black;
    transition: width 0.5s, height 0.5s;
}

.highLight {
    border: 1px solid red;
    width: 80%;
    height: 200px;
}

Here is a working example: http://jsbin.com/kagesoqaca