Плавная смена бэкграунда с помощью 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.

Новые блоги и статьи Все статьи Все блоги /
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Рецензия / Мнение/ Перевод https:/ / **********/ gallery/ thinkpad-x220-tablet-porn-gzoEAjs . . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .

@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