Как анимировать размер фона только по горизонтали?

Question

demo

body{ 
    background: url(path) no-repeat, url(path) no-repeat 50% 0%; 
} 

Я хотел оживить фон-размер от многократного набора фонового изображения. Но я не знаю, как настроить размер фона только одного изображения из нескольких изображений. Напр. в моей демонстрации я хотел изменить фоновый размер второго изображения при нажатии кнопки. Также размер фона должен быть изменен только горизонтально.

$('button').on('click',function(){ 
    $('body').animate({ 
     'background-size': '20%' // '20% 100%' won't work // '100% 20%' won't work. 
    },5000); 
}); 

Answer 1

Во-первых, для события щелчка на кнопке:

В конце вашей HTML страницы, добавьте это:

<script src="path-to-your-jquery-file"></script> 

Тогда добавьте это:

<script> 
    $('#your-button').click(function(){ 
     // Here you must change the css properties of your background 
    }); 
</script> 

Теперь, чтобы изменить только размер фона, вы должны указать все размеры. Например, если у вас есть 2 фона вы можете, вероятно, что-то вроде этого:

background-size: cover, contain; 

может быть решение:

<script> 
    $('#your-button').click(function(){ 
     $('body').css('background-size', '100% 100%, 100% 0%'); 
    }); 
</script> 

Если вы хотите анимировать, используя CSS переходы:

body { 
    transition: 0.5s background ease; 
} 

Переходы CSS: http://www.w3schools.com/css/css3_transitions.asp