I have been working on a website that includes various background images. However, I have encountered an issue with the mobile version where not all backgrounds are displayed correctly on devices. Additionally, I have implemented jQuery animations for desktop versions using margin-left to margin-top animation. My concern now is how to get these jQuery animations to work on mobile devices. Here is my CSS for the background image:
.home
{
background-image:url("../img/sofa.jpg");
background-size:100% 100%;
background-repeat:no-repeat;
height:100vh;
width:100%;
top:0;
left:0;
}
And this is the jQuery code for the animation:
$(document).ready(function(){
setInterval(function(){
$("#animate1").fadeIn('slow')
.animate({'margin-left':'220px','margin-bottom':'20px'},2000,
function(){ $('.1st').animate({'opacity':'0'},1000,
function() {$('.1st').animate({'opacity':'1'})})
}).fadeOut();
$("#animate1").fadeIn('slow')
.animate({'margin-bottom':'0px','margin-left':'-140px'},2000).fadeOut();
},2000);
});
I need assistance on making this jQuery animation compatible with mobile versions since it involves margin type animation. Thank you in advance for your help!