JQuery animate border without moving div

Question

I want to animate a div by first making it\'s border thicker by 5px on mouseenter, then decreasing the border by 5px on mouseleave, the tricky part is that I don\'t want the

Answer 1

Interesting issue... It works better by switching classes, but still it's not very smooth:

http://jsfiddle.net/dzTHB/13/

Answer 2

OK, this became challenging.

Having in mind that your divs are circular:

Use a wrapper (another div) for every one of your divs, bigger than them, center your divs in the wrappers (vertically and horizontally) as "inline-block" and then animate them.

Every border has to be animated independently to work well ("borderLeftWidth", "borderRightWidth", etc. instead of just "borderWidth"). It's a not very well documented bug in jQuery: http://bugs.jquery.com/ticket/7085 (it was hard to discover).

It seems working: http://jsfiddle.net/y4FTf/2/

HTML

<div class="wrapper">
<div class="content">Hello World!
</div>
</div>
<div class="wrapper">
<div class="content">Foo Bar
</div>
</div>

CSS

.wrapper {
width: 210px;
height: 210px;
line-height: 210px;
text-align: center;
padding: 0px;
}
.content {
display: inline-block;
height: 200px;
width: 200px;
border: solid 0px;
vertical-align: middle;
border-radius: 2000px;
background-color: #ccc;
margin: 0px;
}

Javascript

$(function(){
$(".content").mouseover(function(){
    $(this).animate({"borderLeftWidth" : "5px",
                     "borderRightWidth" : "5px",
                     "borderTopWidth" : "5px",
                     "borderBottomWidth" : "5px"
                    }, 300);
}).mouseout(function(){
        $(this).animate({"borderLeftWidth" : "0px",
                         "borderRightWidth" : "0px",
                         "borderTopWidth" : "0px",
                         "borderBottomWidth" : "0px"
                        }, 300);
});
});

Answer 3

So I finally found my own answer. To reiterate what I wanted:

1. Circular divs
2. Animation of increasing border width
3. Don't want the div to look like it's "moving", only the borders should be the moving parts

I achieved this by animating BOTH the margin and border at the same time, because if you just animate the border, then the whole div will shift. But if you decrease the margin at the same time as increasing the border, you get the illusion of the div standing still.

Simply, we have a circular div:

#somediv {
    display: inline-block;
    height: 200px;
    width: 200px;
    border: solid 0px;
    vertical-align: middle;
    border-radius: 2000px;
    background-color: #ccc;
    margin: 0px;
}

And with a JQuery function like:

$(function(){
    $("#somediv").mouseover(function(){
    $(this).animate({"borderLeftWidth" : "5px",
                     "borderRightWidth" : "5px", 
                     "borderTopWidth" : "5px", 
                     "borderBottomWidth" : "5px",

                     "marginLeft" : "-5px",
                     "marginTop" : "-5px",
                     "marginRight" : "-5px",
                     "marginBottom" : "-5px"
                    }, 300);
    }).mouseout(function(){
        $(this).animate({"borderLeftWidth" : "0px", 
                         "borderRightWidth" : "0px", 
                         "borderTopWidth" : "0px", 
                         "borderBottomWidth" : "0px",

                         "marginLeft" : "0px",
                         "marginTop" : "0px",
                         "marginRight" : "0px",
                         "marginBottom" : "0px"
                        }, 300);
    });
});

We can achieve what we want.

Check out this fiffffdle as an example.

Now, another question up for debate is: We want to be able to only animate the border when the mouse is actually over the circular element inside the div, because if you mouseover the corners of the invisible div box, the circle will animate, but that's not what we want. I will post a link to how we can achieve this later.

Answer 4

I didn't read the whole code, but I think there's a better aproach to do what you want.

It's the "outline" css property.

As the spec says: "...does not influence the position or size of the box... ...does not cause reflow or overflow..."

http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines

The code would be something like this:

jQuery(#thumbdiv<%=s.id.to_s%>").mouseenter( function() {
jQuery(this).css("outlineStyle", "solid").animate({
    'outlineWidth': '5px'
}, 500);
}).mouseout( function() {
jQuery(this).animate({
    'outlineWidth': '0px'
}, 500).css("outlineStyle", "solid");
});

Note:

OK, I edited the @Nabab "Fiddle" (I didn't know about that service) and I got this: http://jsfiddle.net/EbTms/ ...I think it works.