I've been troubleshooting this issue and trying various methods, but despite it seeming logical, nothing is working. Any assistance would be greatly appreciated since I'm not very skilled in coding.
My current challenge involves animating an object from the left side to the right side of the screen, with the positioning adjusting based on different screen sizes.
Here's what I have so far. I am able to detect the user's browser size, but I also want to clear the intervals set for animations whenever a new resize is detected.
showViewportSize();
var $box = $('#box');
$(window).resize(function (e) {
window.clearInterval('animation');
showViewportSize();
});
function showViewportSize() {
var width = $(window).width();
var height = $(window).height();
if (width <= 1024) {
var box = setInterval(function () {
$box.animate({
"left": "+1200"
}, 40000, function () {
$box.removeAttr("style");
});
}, 400);
}
if ((width <= 1440) && (width > 1025)) {
var box = setInterval(function () {
$box.animate({
"left": "+1200"
}, 40000, function () {
$box.removeAttr("style");
});
}, 400);
}
if (width >= 2000) {
var box = setInterval(function () {
$box.animate({
"left": "+1200"
}, 40000, function () {
$box.removeAttr("style");
});
}, 400);
}
}