I've been working on a small jQuery script that animates the border of images when hovered over. However, I've run into an issue with unwanted repositioning of adjacent images due to the border width increase.
$(document).ready(function(e) {
$(".oa-article a img").mouseover(function(e)
{
$(this).css('border-style', 'solid');
$(this).css('border-color', '#C63');
$(this).animate(
{
borderWidth: "5px",
}, 100, function()
{
// Animation complete.
});
});
$(".oa-article a img").mouseleave(function(e)
{
$(this).animate(
{
borderWidth: "0px"
}, 200, function()
{
// Animation complete.
});
});
});
My attempted solution of absolute positioning caused issues with parent/child behavior and prevented the page from expanding as desired. Despite this, it did isolate the border growth without affecting other image positions. Ideally, I want the border to grow without impacting any other elements on the page.
If anyone has suggestions or solutions, they would be greatly appreciated. Thank you!