Как .animate() размер фонового изображения

Могу ли я увеличить размер фонового изображения с помощью javascript/jquery?Как .animate() размер фонового изображения

Код, где wt_r и ht_r - размер экрана. Могу ли я сделать эту динамику с помощью .animate()?

$('#outer').css('background-size',wt_r+' '+ht_r);

jsfiddle- http://jsfiddle.net/m7zmzkpz/1/

источник

2014-11-09 X10nD

Можете ли вы объяснить, что начальный размер фонового изображения? Зачем использовать animate() вместо простого задания изображения bg на '100%' в CSS? Вы пробовали использовать «переход» CSS3? Что означает динамика? Чего вы хотите достичь? Также, если 'wt_r' возвращает i.e:' 1200', вам не хватает 'unit'! –

Вы можете создать перехватчик $ .fn.animate() 'и использовать CSS tranistions для фона. Все еще не понимаю, почему ** ** необходимо решить с помощью '.анимировать() '. –

@ RokoC.Buljan для динамического увеличения размера фонового изображения при изменении размера окна браузера. 100% в css - это не то, что я ищу. – X10nD

при изменении размера окна браузера фоновое изображение должно изменить размер - X10nD 3 минуты назад

Нет JS необходимой на всех ...

background-size:100% 100%; // or just 100% to keep Aspect-Ratio

http://jsbin.com/varecu/1/edit?html,css,js,output

Анимация при загрузке страницы? Нет JS нужен вообще:

http://jsbin.com/xuhuca/1/edit?html,css,js,output

не хотят, чтобы сохранить пропорции, но заполнить все пробелы? background-size: cover;

http://jsbin.com/varecu/2/edit

_{(Изменение размера окна на всех этих демок, чтобы увидеть магию. Фоновое изображение изменяет размер!)}

источник

2014-11-09 11:25:23

Я попытался вставить этот рисунок - http://wallpoper.com/images/00/44/95/50/autumn-scenery-2_00449550.jpg, и изображение не изменяется с размером окна – X10nD

@ X10nD Я не понять ваш комментарий, я предоставил вам 3 ссылки jsBin, где вы можете просто изменить URL-адрес изображения, чтобы увидеть результат: http://jsbin.com/varecu/4/ и http://jsbin.com/varecu/3/>> изменить размер или ИЗМЕНИТЬ jsBins по желанию. –

Извините @roko, теперь все идет правильно .. Большое вам спасибо. позвольте мне проверить. – X10nD

Трудно ответить на вопрос без дополнительной информации, но вы можете попробовать оживить ваш фоновый размер с backgroundSize собственности? как это:

$('#outer').animate({ backgroundSize: '100%' }, 3000);

Попробуйте использовать свои собственные параметры wt_r и ht_r в качестве значения backgroundSize

Надеется, что это помогает!

источник

2014-11-09 10:57:03 Matas

Что такое 3000 ....? Размер фона имеет два входа, ширину и высоту. – X10nD

3000 - 3000 мс - время для анимации - попробуйте сыграть с этим значением, чтобы достичь идеального времени для анимации. Этот код предназначен только для размера изображения, а не для позиции изображения – Matas

@ RokoC.Buljan. Да, это значение ms, оно сошло с ума. спасибо – X10nD

Вы не можете изменить высоту и ширину фонового изображения.

Использование .animate():

$('#outer').animate({backgroundSize: '100%'}, 800);

источник

2014-11-09 11:00:22

Не нижний, а '100%' должен быть строкой. И ИМО, устанавливающий var в течение продолжительности в этом примере, дополняет вещи больше, чем помогает – Martijn

отредактировал, забыл: D (это усложняет вещи, но op не знает, для чего был использован параметр) –

Это правильный ответ. [Вот скрипка.] (Http://jsfiddle.net/daveSalomon/xnmpmahh/) Если флажок отмечен, изменение размера пытается использовать «анимировать», задавая ширину + высоту - это не работает. Если он невнимателен, он называет вещи с изменением размера без анимации - и это работает. –

Предполагая, что вы хотите #outer, чтобы соответствовать размеру экрана вы могли бы сделать soemthing так:

var setSize = function(w, h) { 
    $('#outer').css({ 
     'background-size': w + 'px ' + h + 'px' 
    }) 
}

Функция SetSize принимает два параметра, ширина и высота. Вы можете вызывать эту функцию там, где она вам нужна, f.ex при изменении размера. Вы можете передать текущую ширину и высоту окна в функцию, как это:

window.on(resize, function(){ 

    var wt_r = $(window).width(); 
    var ht_r = $(window).height(); 

    setSize(wt_r, ht_r); 

})

источник

2014-11-09 11:24:06 jermund

Вы не проверили это, не так ли? –

Как .animate() размер фонового изображения

ответ

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