如何使背景圖像和jquery動畫響應？

Question

我正在建立一個包含各種背景圖像的網站。 但我的疑問是，當我在移動版中看到時，每個背景都沒有正確顯示設備。 我還將jquery應用於動畫，其中包含桌面版本中的margin-left到margin-top動畫。 那么，在移動設備中如何播放我的jquery動畫。 我的背景圖像css如下。

.home
{
background-image:url("../img/sofa.jpg");
background-size:100% 100%;
background-repeat:no-repeat; 
height:100vh;
width:100%;
top:0;
left:0;
}

現在，我的動畫jquery如下：

$(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);
    });

如何在移動版中播放我的這個jquery，因為它包含邊距類動畫？ 請幫幫我......感謝提前.. !!

Answer 1

嘗試使用jquery進行背景圖片幻燈片放映，並使用CSS3媒體查詢進行響應。

@media screen {max-device:320px }  @media screen{max-device:600px}

同樣，你可以處理你的斷點。