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

0

демонстрация

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); 
});
  • 0
    Он работает с методом CSS, но не с анимацией, почему? jsfiddle.net/86cyx/5
  • 0
    Есть какой-либо способ сделать это?
Теги:

1 ответ

1
Лучший ответ

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

В конце страницы 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

Поделиться
  • 0
    У вас проблемы с методом animate, он работает: $ ('button'). On ('click', function () {$ ('body'). Css ('background-size', '10% 10 %, 100% 10% ');});
  • 0
    Поэтому, пожалуйста, обновите демо, чтобы получить работу. Благодарю.
Показать ещё 14 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню