Двигающаяся картинка

@Bohes · Регистрация: 10.07.2011

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

Как сделать так, чтобы по нажатию кнопки создавалась картинка и передвигалась вверх или вниз, изменяя уровень прозрачности от 1 до 0?
В каком направлении копать, чтобы добавить движение?

@fol · 19.03.2017, 09:50

Javascript

$('button').click(function(){
  $('img').animate({
     'top':'xxx',
     'left':'yyy',
     'opacity':'1'
  }, 500)
})

это передвижение. А "создавалась картинка" - не очень понятно

@Bohes · 19.03.2017, 12:03 **[ТС]**

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

это передвижение. А "создавалась картинка" - не очень понятно

Первоначально на страничке картинки нет (либо она невидима). А по щелчку она должна начать появляться.

@fol · 19.03.2017, 14:36

Если невидима (display:block, например), то

Javascript

1	$('img').fadeIn();

Если картинки еще не существует, то ее надо вставить с помощью метода append():

Javascript

1	$("тут блок, в который поместить кратинку").append('<img alt="" src="">')

@Bohes · 19.03.2017, 14:53 **[ТС]**

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

Если картинки еще не существует, то ее надо вставить с помощью метода append():

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

@fol · 20.03.2017, 00:01

Например, поместить ее в общую обертку и двигать относительно обертки, задав z-index больше, чем у остальных блоков.

@Bohes 12 / 8 / 6 Регистрация: 10.07.2011 Сообщений: 374 Записей в блоге: 1
		1
	Двигающаяся картинка 19.03.2017, 07:47. Показов 1937. Ответов 5 Метки изоюражения (Все метки) Как сделать так, чтобы по нажатию кнопки создавалась картинка и передвигалась вверх или вниз, изменяя уровень прозрачности от 1 до 0? В каком направлении копать, чтобы добавить движение? 0

@Bohes 12 / 8 / 6 Регистрация: 10.07.2011 Сообщений: 374 Записей в блоге: 1
	19.03.2017, 12:03 [ТС]	3
	Сообщение от fol это передвижение. А "создавалась картинка" - не очень понятно Первоначально на страничке картинки нет (либо она невидима). А по щелчку она должна начать появляться. 0

@Bohes 12 / 8 / 6 Регистрация: 10.07.2011 Сообщений: 374 Записей в блоге: 1
	19.03.2017, 14:53 [ТС]	5
	Сообщение от fol Если картинки еще не существует, то ее надо вставить с помощью метода append(): А как поступить, если нужно, чтобы картинка двигалась поверх остальных блоков, не изменяя их? 0

@fol 511 / 485 / 161 Регистрация: 08.07.2013 Сообщений: 1,714 Записей в блоге: 1
	20.03.2017, 00:01	6
	Например, поместить ее в общую обертку и двигать относительно обертки, задав z-index больше, чем у остальных блоков. 0

Двигающаяся картинка

Решение