I need assistance in modifying a script that causes a fade effect on certain elements only on desktop and not on mobile devices. I have attempted using the code below, but it seems to hide all elements on all screen resolutions. In my CSS, I am applying display: none to each element, and I suspect that when the jQuery script is disabled, the CSS takes over. I'm unsure of how to resolve this issue. Any guidance would be greatly appreciated!
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ? true : false;
$(window).load(function() {
if(!isMobile) {
$('.rmm').each(function(i) {
$(this).delay((i + 4) * 250).fadeIn(1000);
});
$('.social').each(function(i) {
$(this).delay((i + 4) * 250).fadeIn(1000);
});
$('.filmpress').each(function(i) {
$(this).delay((i + 4) * 250).fadeIn(1000);
});
$('.filmpress2').each(function(i) {
$(this).delay((i + 4) * 250).fadeIn(1000);
});
$('.arrow').each(function(i) {
$(this).delay((i + 4) * 250).fadeIn(1000);
});
$('.venice').each(function(i) {
$(this).delay((i + 4) * 250).fadeIn(1000);
});
$('.title').each(function(i) {
$(this).delay((i + 4) * 250).fadeIn(1000);
});
$('.logo h3').each(function(i) {
$(this).delay((i + 4) * 250).fadeIn(1000);
});
$('#bgbig').each(function(i) {
$(this).delay((i + 0) * 250).fadeIn(1000);
});
$('.logo h2').each(function(i) {
$(this).delay((i + 4) * 250).fadeIn(1000);
});
}
});