Форум

pshcolnyy · #1 (**permalink**) 12.08.2014, 02:03

Всем привет. Скажите пожалуйста в чём ошибка.
Попытался сделать простое окно с содержимым которые при нажатии на кнопку сползает вверх и появляется то что было под тем содержимым.

<div id="obolochka">
		<div id="telo">
			aslkdjfklsaflksajdflkasjdflksjdfl;ajfl
			alksdjflkjasfdljlasdjf;lajsdfljasf;lj
			alksdjflasjf;lsjdflajdfajsfldjsalfjs
			alksdjfljasfljfsdjaflsajfldjsafdjl;asd
			flkasjflksjfljasfjalskfjl;ajfdl;asjf;laj'
			alfdksjflkjasl;fjasljdflsakjfdlasjdfjlsafj
			ajsdlfkjkalsfjalfkjlasjfljasfljsfdjk
			adsjlkfjasflkjasdl;kjfsaljflsajdflk
			asdfjlasjfdlasdjflasjfdlafjdlsajfl;sajfd
			ajlsdkfjasl;kjdflaksjfdla;skjfdlaskjfdla;
			ajdlsfkjals;kdjflaskjfdlakjfdlsajfalsdjkf
			alsdkfjlasjfdl;asjfdlajksfdlaksjdflja
			adlkfjaksljdfkjasfdlkjasfjlkfdsalkjfslk
			al;ksdjflaksjfdlkjasfdlkajsfdlkjafdlk
			alksdjlkjfdalsjkfdlkajfdlksjafdjlkafdlkj
			alskfdjal;sdfj;asdfjlasjfdladfjlakjsdflajdf
			alsdkfj;afj;asldfjalsdjflajsdflasjfdslj
			alskdfj;adf;lasjdflasdfjalskjdflkasjdflkja
			aslkdjfklsaflksajdflkasjdflksjdfl;ajfl
			alksdjflkjasfdljlasdjf;lajsdfljasf;lj
			alksdjflasjf;lsjdflajdfajsfldjsalfjs
			alksdjfljasfljfsdjaflsajfldjsafdjl;asd
			flkasjflksjfljasfjalskfjl;ajfdl;asjf;laj'
			alfdksjflkjasl;fjasljdflsakjfdlasjdfjlsafj
			ajsdlfkjkalsfjalfkjlasjfljasfljsfdjk
			adsjlkfjasflkjasdl;kjfsaljflsajdflk
			asdfjlasjfdlasdjflasjfdlafjdlsajfl;sajfd
			ajlsdkfjasl;kjdflaksjfdla;skjfdlaskjfdla;
			ajdlsfkjals;kdjflaskjfdlakjfdlsajfalsdjkf
			alsdkfjlasjfdl;asjfdlajksfdlaksjdflja
			adlkfjaksljdfkjasfdlkjasfjlkfdsalkjfslk
			al;ksdjflaksjfdlkjasfdlkajsfdlkjafdlk
			alksdjlkjfdalsjkfdlkajfdlksjafdjlkafdlkj
			alskfdjal;sdfj;asdfjlasjfdladfjlakjsdflajdf
			alsdkfj;afj;asldfjalsdjflajsdflasjfdslj
			alskdfj;adf;lasjdflasdfjalskjdflkasjdflkja
			aslkdjfklsaflksajdflkasjdflksjdfl;ajfl
			alksdjflkjasfdljlasdjf;lajsdfljasf;lj
			alksdjflasjf;lsjdflajdfajsfldjsalfjs
			alksdjfljasfljfsdjaflsajfldjsafdjl;asd
			flkasjflksjfljasfjalskfjl;ajfdl;asjf;laj'
			alfdksjflkjasl;fjasljdflsakjfdlasjdfjlsafj
			ajsdlfkjkalsfjalfkjlasjfljasfljsfdjk
			adsjlkfjasflkjasdl;kjfsaljflsajdflk
			asdfjlasjfdlasdjflasjfdlafjdlsajfl;sajfd
			ajlsdkfjasl;kjdflaksjfdla;skjfdlaskjfdla;
			ajdlsfkjals;kdjflaskjfdlakjfdlsajfalsdjkf
			alsdkfjlasjfdl;asjfdlajksfdlaksjdflja
			adlkfjaksljdfkjasfdlkjasfjlkfdsalkjfslk
			al;ksdjflaksjfdlkjasfdlkajsfdlkjafdlk
			alksdjlkjfdalsjkfdlkajfdlksjafdjlkafdlkj
			alskfdjal;sdfj;asdfjlasjfdladfjlakjsdflajdf
			alsdkfj;afj;asldfjalsdjflajsdflasjfdslj
			alskdfj;adf;lasjdflasdfjalskjdflkasjdflkja
		</div>
		<div id="knopka">
			<input type="button" value="knopka">
		</div>
	</div>

Код:

#obolochka {
	margin: 300px auto 0 auto;
	border: 2px solid black;
	width: 500px;
	height: 350px; 
}

#telo {
	position: absolute;
	width: 500px;
	height: 300px;
	overflow: hidden;
	outline: 2px solid red;
}

#knopka {
	bottom: 0px;
	height: 50px;
	width: 50px;
	margin: 300px auto 0 auto;
}

$("#knopka").click(function() {
	$("#telo").animate({"top":"+=100px"},500);
})

И еще один вопрос какой правильный синтаксис метода animate
так:
.animate({"top":"+=100px"},500);
или:
.animate({top:+=100px"},500);

рони · #2 (**permalink**) 12.08.2014, 02:35

pshcolnyy,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
#obolochka {
    position: relative;
	margin: 0px auto;
	border: 2px solid black;
	width: 500px;
	height: 350px;
    overflow: hidden;

}

#telo {
	position: absolute;
	width: 500px;
	height: 300px;
	overflow: hidden;
	outline: 2px solid red;
    top:0px;
    background: rgba(255, 255, 255, 1);
}

#knopka {
	bottom: 0px;
	height: 50px;
	width: 50px;
	margin: 300px auto;
}
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
  	$(function()
  	  {
  	    $("#knopka").click(function()
  	      {
  	        $("#telo").animate({"top": "-=300"}, 500);
  	      }
  	    )
  	  }
  	);
  </script>
</head>

<body>
<div id="obolochka">
		<div id="telo">
			aslkdjfklsaflksajdflkasjdflksjdfl;ajfl
			alksdjflkjasfdljlasdjf;lajsdfljasf;lj
			alksdjflasjf;lsjdflajdfajsfldjsalfjs
			alksdjfljasfljfsdjaflsajfldjsafdjl;asd
			flkasjflksjfljasfjalskfjl;ajfdl;asjf;laj'
			alfdksjflkjasl;fjasljdflsakjfdlasjdfjlsafj
			ajsdlfkjkalsfjalfkjlasjfljasfljsfdjk
			adsjlkfjasflkjasdl;kjfsaljflsajdflk
			asdfjlasjfdlasdjflasjfdlafjdlsajfl;sajfd
			ajlsdkfjasl;kjdflaksjfdla;skjfdlaskjfdla;
			ajdlsfkjals;kdjflaskjfdlakjfdlsajfalsdjkf
			alsdkfjlasjfdl;asjfdlajksfdlaksjdflja
			adlkfjaksljdfkjasfdlkjasfjlkfdsalkjfslk
			al;ksdjflaksjfdlkjasfdlkajsfdlkjafdlk
			alksdjlkjfdalsjkfdlkajfdlksjafdjlkafdlkj
			alskfdjal;sdfj;asdfjlasjfdladfjlakjsdflajdf
			alsdkfj;afj;asldfjalsdjflajsdflasjfdslj
			alskdfj;adf;lasjdflasdfjalskjdflkasjdflkja
			aslkdjfklsaflksajdflkasjdflksjdfl;ajfl
			alksdjflkjasfdljlasdjf;lajsdfljasf;lj
			alksdjflasjf;lsjdflajdfajsfldjsalfjs
			alksdjfljasfljfsdjaflsajfldjsafdjl;asd
			flkasjflksjfljasfjalskfjl;ajfdl;asjf;laj'
			alfdksjflkjasl;fjasljdflsakjfdlasjdfjlsafj
			ajsdlfkjkalsfjalfkjlasjfljasfljsfdjk
			adsjlkfjasflkjasdl;kjfsaljflsajdflk
			asdfjlasjfdlasdjflasjfdlafjdlsajfl;sajfd
			ajlsdkfjasl;kjdflaksjfdla;skjfdlaskjfdla;
			ajdlsfkjals;kdjflaskjfdlakjfdlsajfalsdjkf
			alsdkfjlasjfdl;asjfdlajksfdlaksjdflja
			adlkfjaksljdfkjasfdlkjasfjlkfdsalkjfslk
			al;ksdjflaksjfdlkjasfdlkajsfdlkjafdlk
			alksdjlkjfdalsjkfdlkajfdlksjafdjlkafdlkj
			alskfdjal;sdfj;asdfjlasjfdladfjlakjsdflajdf
			alsdkfj;afj;asldfjalsdjflajsdflasjfdslj
			alskdfj;adf;lasjdflasdfjalskjdflkasjdflkja
			aslkdjfklsaflksajdflkasjdflksjdfl;ajfl
			alksdjflkjasfdljlasdjf;lajsdfljasf;lj
			alksdjflasjf;lsjdflajdfajsfldjsalfjs
			alksdjfljasfljfsdjaflsajfldjsafdjl;asd
			flkasjflksjfljasfjalskfjl;ajfdl;asjf;laj'
			alfdksjflkjasl;fjasljdflsakjfdlasjdfjlsafj
			ajsdlfkjkalsfjalfkjlasjfljasfljsfdjk
			adsjlkfjasflkjasdl;kjfsaljflsajdflk
			asdfjlasjfdlasdjflasjfdlafjdlsajfl;sajfd
			ajlsdkfjasl;kjdflaksjfdla;skjfdlaskjfdla;
			ajdlsfkjals;kdjflaskjfdlakjfdlsajfalsdjkf
			alsdkfjlasjfdl;asjfdlajksfdlaksjdflja
			adlkfjaksljdfkjasfdlkjasfjlkfdsalkjfslk
			al;ksdjflaksjfdlkjasfdlkajsfdlkjafdlk
			alksdjlkjfdalsjkfdlkajfdlksjafdjlkafdlkj
			alskfdjal;sdfj;asdfjlasjfdladfjlakjsdflajdf
			alsdkfj;afj;asldfjalsdjflajsdflasjfdslj
			alskdfj;adf;lasjdflasdfjalskjdflkasjdflkja
		</div>фигня всякая
		<div id="knopka">
			<input type="button" value="knopka">
		</div>
	</div>

</body>

</html>

pshcolnyy · #3 (**permalink**) 12.08.2014, 03:31

так вся проблема была в том что я не указал position: relative? Это же просто указывает относительно какого элемента происходит сдвиг.

pshcolnyy · #4 (**permalink**) 12.08.2014, 03:32

Но все равно спасибо за код, хотя я толком ничего не понял.

pshcolnyy · #5 (**permalink**) 12.08.2014, 04:39

Я немного подумав понял что ничего не понял

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

)

tsigel · #6 (**permalink**) 12.08.2014, 13:06

Можно подключить скрипт с отдельным файлом в самом низу body тогда не надо будет делать функцию дожидающуюся загрузки дом.

Форум

Справочник

Discord чат

Курсы javascript