2016-11-12 3 views
1

Я создаю сайт, который содержит различные фоновые изображения. Но мой запрос - это когда я видел в мобильной версии, каждый фон не показан должным образом с устройствами. и я также применяю jquery для анимации, которая содержит маржу слева от маржинальной анимации в настольной версии. Итак, в мобильном устройстве, как я могу воспроизвести анимацию jquery. Мой css для фонового изображения выглядит следующим образом.Как добавить фоновое изображение и анимацию jquery?

.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 в мобильной версии, поскольку она содержит тип запас анимацию? Пожалуйста, помогите мне ... СПАСИБО заранее .. !!

ответ

0

Попробуйте использовать jquery для слайд-шоу с фоновым изображением и использовать запросы CSS3 для реагирования.

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

Аналогичным образом вы можете обрабатывать точки останова.

Смежные вопросы