Плавная смена бэкграунда с помощью JQuery

@crypton_ua · Регистрация: 12.02.2017

Студворк — интернет-сервис помощи студентам

Следующая цель - это добавление анимации (плавности смены бекграундов) посредством jQuery.

Попробовал так, но конечно же безрезультатно:

JavaScript
1
2
$('body').fadeIn(1000, function blim ());
// а функция отдельно

или

JavaScript
1
2
3
4
5
6
7
8
9
$('body').fadeIn(1000, function ()
{
document.body.style.backgroundImage = "url('photos/code.jpg')";
$('body').css({
'background-size': '100%',
'background-position': 'center',
'background-attachment': 'fixed'
})
});

Или же сперва нужно обращаться не к body? Ну точно уж не к img. И можно ли писать через точку в этом случае, т.е. $(document.body.style.backgroundImage).f adeIn(1000, function blim ()); ?

Сопутствующие вопросы:

- внутри эфеекта вообще можно указывать функцию с названием (например, function blim)? Как в моём первом примере

- этот эффект (fadeIn/Out/To и др.), как то привязывается к функции? Потом можно вызывать функцию, которая находится внутри этого эффекта и она уже будет отображаться (выполняться) с этой анимацией (с применнением этого эффекта)?

@kalabuni · 19.02.2017, 10:56

crypton_ua,

Сообщение от crypton_ua

document.body даёт нам кучу значений

это вы о чём, о какой-такой "куче"?

вы как-то очень неправильно "изучаете js", раз пишете такие несуразности

-------------
document.body === document.getElementsByTagName('body') [0]
// т.е. обе эти ссылки не просто равны , они тождественны и обе дают доступ к одному и тому же телу документа (единственному в документе), как к объекту, у которого, естественно, имеется "куча" свойств

я вам лишь указал, что из двух этих тождественных ссылок проще и правильнее использовать первую

@crypton_ua · 19.02.2017, 11:03 **[ТС]**

kalabuni,
Вообще не вижу смысла в ваших двух постах в этой теме...
Все таки поняли, о какой "куче" идет речь, так зачем прикидываться?
Я и использовал document.body, разве не видно

Обойдусь без ваших "советов" здесь

@kalabuni · 19.02.2017, 16:54

Не по теме:

Сообщение от crypton_ua

Обойдусь

рад за вас
удачи!

@Balanaar · 20.02.2017, 10:01

На самом деле kalabuni всё правильно сказал. Я намеренно использовал конструкцию document.getElementsByTagName('body')[0] для того, чтобы показать, что метод возвращает коллекцию элементов, а не один элемент, и чтобы в будущем у вас не возникло проблем с этим методом. kalabuni внёс свой весьма уместный комментарий. Странно, что вы так резко отреагировали.
По теме:

JavaScript
1
$('body').fadeIn(1000, function blim ());

Некорректная передача функции в качестве аргумента. Ключевое слово function используется для объявления функций. То есть вы объявили новую пустую функцию blim() и передали её в качестве аргумента. Писать следует так:

JavaScript
1
$('body').fadeIn(1000, blim ());

Ну и не очень понятно, как именно должна проходить анимация. Опишите логику, а то по коду трудно понять, что вы имели в виду. Возможно вам следует посмотреть метод $.animate()

@crypton_ua · 20.02.2017, 12:04 **[ТС]**

Balanaar,
С kalabuni и его TagName разобрались. Просто не люблю когда кто-то лезет непонятно зачем и вопросов по поводу его "ответа" не было и я сразу начал использовать document.body. Так как ваш ответ по этому поводу был предельно понятен.

По теме:
Ну по идее, если я правильно понял, этот эффект отвечает за появление, ну вот и хотел, чтобы изображение плавно появлялось в качестве бекграунда. Animate тоже рассматривал, но подумал что и с fadeIn должно работать. И в чем вообще разница между fade и animate (что он анимирует)?

@Balanaar · 20.02.2017, 13:23

$.animate() грубо говоря эмулирует css-свойство transition.
$.fadeIn() отвечает за плавное "проявление".
Вообще, чтобы реализовать задуманное, вам всё-таки нужно добавить <img>-элемент для <body> и работать с ним. Либо добавить <div>-элемент на весь <body> с абсолютным позиционированием и с вашим бекграундом и работать с ним.

@crypton_ua · 22.02.2017, 15:43 **[ТС]**

Balanaar,
значит для применеия какого-то из этих эффектов, нужно чтобы непосредственно на странице был елемент, над которым такая анимация будет происходить?
а закинуть нашу функцию в этот эффект не получится, я так понял...

@Balanaar · 22.02.2017, 16:24

Сообщение от crypton_ua

значит для применеия какого-то из этих эффектов, нужно чтобы непосредственно на странице был елемент, над которым такая анимация будет происходить?

Верно.

Сообщение от crypton_ua

а закинуть нашу функцию в этот эффект не получится, я так понял

Методы $.animate() и $.fadeIn() могут принимать в качестве аргументов функции только в качестве completion handler'а. Если вы просто хотите менять туда-сюда изображение без дополнительных эффектов - то вы уже реализовали задуманное с помощью setInterval()

@crypton_ua · 23.02.2017, 18:08 **[ТС]**

Balanaar,
а можно несколько ссылок по теме (js + jQuery)?
а то чувствую что совсем нифига не знаю, даже после прочтения двух учебников в нете...
или такое нормально? кажись когда html и css учил также было, потом всё на практике освоил, но тут уже другой уровень...

@crypton_ua · 09.03.2017, 11:44 **[ТС]**

Balanaar, ...

@Azdeman · 10.03.2017, 14:49

Сообщение от crypton_ua

а то чувствую что совсем нифига не знаю,

Это нормально.
Смотрите темы js,jQuery, пытайтесь на них отвечать, придумывайте задание, пытайтесь их выполнять , и будет всё

Если не можете придумывать задание, обращайтесь в ЛС, или же на форум. Я могу вам их столько понапридумывать

@Balanaar · 10.03.2017, 15:27

А ещё если не можете придумывать задания - добро пожаловать на codewars. Там их навалом.

@Зверушь · 10.03.2017, 16:34

crypton_ua, сам после html и css изучал js

Но советую не изучать по всяким сайтам, где вообще не понятно в какой последовательности что лучше учить, а взять замечательную книгу Фленагана и учить. От начала и до конца особо не скача по главам.

@crypton_ua · 19.06.2017, 12:23 **[ТС]**

В гугл хром на новом ноуте при попытке открыть js файл тупо выводит его содержимое на страницу, а в консоли выдает вот такое - Resource interpreted as Document but transferred with MIME type application/javascript: флеш и всплывающие уведомления включены, файл обычный почти без ничего просто ссылается на второй внешний файл с самим кодом. в котором только лишь один метод alert. В Едже этот код запускается без проблем...

Зверушь,
и как успехи?) сколько времени понадобилось? и вопрос ко всем можно ли найти работу, зная только джаваскрипт например? и на каком уровне нужно владеть для трудоустройства?

@Зверушь · 19.06.2017, 13:59

crypton_ua, успехи хорошо, сейчас успешно фрилансю почти два года

Я изучал все можно сказать с нуля, до этого немного знал только Visual Basic и 1С

На html ушло 3 месяца,
Затем на CSS ушло также 3 месяца.
Потом изучал Javascript. Потратил на это 6 месяцев.
А затем около 1,5 года изучал php, прежде чем начал что-то делать реально стоящее. Сначала для себя, а потом и в продакшин.
Важно то, что это все по отдельности не учится. Нельзя изучить css, не зная html. И нельзя изучить js, не зная html и css. И т.д.

JS у меня не основной язык, я больше по PHP.
Продолжаю учиться дальше. Программисты всю жизнь учатся... Вот параллельно узнаю что-то новое по PHP, JS и SQL... Только сейчас добрался до паттернов проектирования...

@8Observer8 · 19.06.2017, 23:07

Сообщение от crypton_ua

а можно несколько ссылок по теме (js + jQuery)?

https://www.w3schools.com/js/default.asp
https://www.w3schools.com/jquery/default.asp

P.S. Обратите внимание на эту фразу на страничке js:

Examples are better than 1000 words. Examples are often easier to understand than text explanations.

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@crypton_ua 7 / 7 / 0 Регистрация: 12.02.2017 Сообщений: 315
	19.02.2017, 11:03 [ТС]
	kalabuni, Вообще не вижу смысла в ваших двух постах в этой теме... Все таки поняли, о какой "куче" идет речь, так зачем прикидываться? Я и использовал document.body, разве не видно Обойдусь без ваших "советов" здесь 0

@crypton_ua 7 / 7 / 0 Регистрация: 12.02.2017 Сообщений: 315
	20.02.2017, 12:04 [ТС]
	Balanaar, С kalabuni и его TagName разобрались. Просто не люблю когда кто-то лезет непонятно зачем и вопросов по поводу его "ответа" не было и я сразу начал использовать document.body. Так как ваш ответ по этому поводу был предельно понятен. По теме: Ну по идее, если я правильно понял, этот эффект отвечает за появление, ну вот и хотел, чтобы изображение плавно появлялось в качестве бекграунда. Animate тоже рассматривал, но подумал что и с fadeIn должно работать. И в чем вообще разница между fade и animate (что он анимирует)? 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	20.02.2017, 13:23
	$.animate() грубо говоря эмулирует css-свойство transition. $.fadeIn() отвечает за плавное "проявление". Вообще, чтобы реализовать задуманное, вам всё-таки нужно добавить <img>-элемент для <body> и работать с ним. Либо добавить <div>-элемент на весь <body> с абсолютным позиционированием и с вашим бекграундом и работать с ним. 0

@crypton_ua 7 / 7 / 0 Регистрация: 12.02.2017 Сообщений: 315
	22.02.2017, 15:43 [ТС]
	Balanaar, значит для применеия какого-то из этих эффектов, нужно чтобы непосредственно на странице был елемент, над которым такая анимация будет происходить? а закинуть нашу функцию в этот эффект не получится, я так понял... 0

@crypton_ua 7 / 7 / 0 Регистрация: 12.02.2017 Сообщений: 315
	23.02.2017, 18:08 [ТС]
	Balanaar, а можно несколько ссылок по теме (js + jQuery)? а то чувствую что совсем нифига не знаю, даже после прочтения двух учебников в нете... или такое нормально? кажись когда html и css учил также было, потом всё на практике освоил, но тут уже другой уровень... 0

@crypton_ua 7 / 7 / 0 Регистрация: 12.02.2017 Сообщений: 315
	09.03.2017, 11:44 [ТС]
	Balanaar, ... 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	10.03.2017, 15:27
	А ещё если не можете придумывать задания - добро пожаловать на codewars. Там их навалом. 0

@Зверушь 461 / 369 / 94 Регистрация: 01.05.2010 Сообщений: 1,761
	10.03.2017, 16:34
	crypton_ua, сам после html и css изучал js Но советую не изучать по всяким сайтам, где вообще не понятно в какой последовательности что лучше учить, а взять замечательную книгу Фленагана и учить. От начала и до конца особо не скача по главам. 0

@crypton_ua 7 / 7 / 0 Регистрация: 12.02.2017 Сообщений: 315
	19.06.2017, 12:23 [ТС]
	В гугл хром на новом ноуте при попытке открыть js файл тупо выводит его содержимое на страницу, а в консоли выдает вот такое - Resource interpreted as Document but transferred with MIME type application/javascript: флеш и всплывающие уведомления включены, файл обычный почти без ничего просто ссылается на второй внешний файл с самим кодом. в котором только лишь один метод alert. В Едже этот код запускается без проблем... Зверушь, и как успехи?) сколько времени понадобилось? и вопрос ко всем можно ли найти работу, зная только джаваскрипт например? и на каком уровне нужно владеть для трудоустройства? 0

@Зверушь 461 / 369 / 94 Регистрация: 01.05.2010 Сообщений: 1,761
	19.06.2017, 13:59
	crypton_ua, успехи хорошо, сейчас успешно фрилансю почти два года Я изучал все можно сказать с нуля, до этого немного знал только Visual Basic и 1С На html ушло 3 месяца, Затем на CSS ушло также 3 месяца. Потом изучал Javascript. Потратил на это 6 месяцев. А затем около 1,5 года изучал php, прежде чем начал что-то делать реально стоящее. Сначала для себя, а потом и в продакшин. Важно то, что это все по отдельности не учится. Нельзя изучить css, не зная html. И нельзя изучить js, не зная html и css. И т.д. JS у меня не основной язык, я больше по PHP. Продолжаю учиться дальше. Программисты всю жизнь учатся... Вот параллельно узнаю что-то новое по PHP, JS и SQL... Только сейчас добрался до паттернов проектирования... 0