My goal is to have the outer two columns smoothly slide out upon refresh, and then slide back when the mouse hovers over the left/right edge.
Here is the fiddle for reference: https://jsfiddle.net/3362xu89/
Below is the jQuery code I am using:
var toggleEdges = function(width) {
var end = true;
var slideOutLeftEdge = function() {
$('.leftAnchor').animate({width: '0px'}, 1000, function() {
$('.leftAnchor').hide();
end = true;
});
};
var slideInLeftEdge = function() {
$('.leftAnchor').show();
$('.leftAnchor').animate({width: width + 'px'}, 1000, function() {
end = true;
});
};
var slideOutRightEdge = function() {
$('.rightAnchor').animate({width: '0px'}, 1000, function() {
$('.rightAnchor').hide();
end = true;
});
};
var slideInRightEdge = function() {
$('.rightAnchor').show();
$('.rightAnchor').animate({width: width + 'px'}, 1000, function() {
end = true;
});
};
slideOutLeftEdge();
slideOutRightEdge();
$(document).on('mousemove', function(event) {
if (event.pageX > width) {
if (end) {
end = false;
slideOutLeftEdge();
}
}
if (event.pageX < 10) {
if (end) {
end = false;
slideInLeftEdge();
}
}
if (event.pageX < window.innerWidth - width) {
if (end) {
end = false;
slideOutRightEdge();
}
}
if (event.pageX > window.innerWidth - 10) {
if (end) {
end = false;
slideInRightEdge();
}
}
});
};
toggleEdges(500);
However, this implementation has some issues. It sometimes leaves a 100px wide gap at the end of the animation, the hover effect may not work consistently on the website, and it can struggle or stop working when there is additional JavaScript code running on the site.
Can anyone spot what might be wrong with this setup?