Форум Сайтостроение Веб-строительство

"Появление" в JQuery

flenj
На сайте с 21.07.2010
Offline
59
flenj
1432

Доброе утро всем!

Подскажите, есть небольшой скрипт, при наведении на определённую область, сверху опускается картинка:

$(document).ready(function(){

	$("#all").hover(function(){

		$("#panel").slideToggle("slow");		
		$(this).toggleClass("active"); return false;
		
		});	
	 
});

CSS:

body {
	margin: 0 auto;
	padding: 0;
	width: 570px;
	height: 500px;
	font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
	outline: none;
}
#all {
	background-color: grey;
	width: 500px;
	height: 500px;

}
#panel {
	background: #754c24;
	width: 150px;
	height: 400px;
	display: none;
	margin: 0 auto;
}
.slide {
	margin: 0 auto;
	padding: 0;
	width: 150px;
	border-top: solid 30px #422410;
	background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
	background-color: red;
	text-align: center;
	width: 150px;
	height: 31px;
	padding: 10px 0 0 0;
	margin: 0 auto;
	display: block;
	font: bold 120%/100% Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
}
.active {
	background-color: green;
}

Вопрос: какой код нужно добавить, чтобы после пункта "2" происходило плавное появление объекта прямо под картинкой?

Далее - выход из области и область исчезает, а картинка уплывает опять наверх.

Заранее спасибо за ответ!

jpg 79269.jpg
Порфолиё /ru/forum/526650 (/ru/forum/526650)
webspacer
На сайте с 04.07.2007
Offline
35
webspacer
#1

Сделайте Два DIVa и внутри них контент которій должен плавать, и последовательно один слайд и второй фейд.

Качественных VDS сервера. VDS для SEO за $ 9.99 (http://clck.ru/3MNN)
flenj
На сайте с 21.07.2010
Offline
59
flenj
#2 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Simple Slide Panel</title>



<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>



<script type="text/javascript">

$(document).ready(function(){



	$("#all").hover(function(){		

		$("#panel").slideToggle("slow");

		$(".btn-slide").fadeToggle("slow"); return false;

		

		});	

	 

});

</script>



<style type="text/css">

body {

	margin: 0 auto;

	padding: 0;

	width: 570px;

	height: 500px;

	font: 75%/120% Arial, Helvetica, sans-serif;

}

a:focus {

	outline: none;

}

#all {

	background-color: grey;

	width: 500px;

	height: 500px;

	position: relative;

}



#panel {

	background: #754c24;

	width: 150px;

	height: 300px;

	display: none;

	margin: 0 auto;

	padding: 10px 0 0 0;

}



.anti {

	width: 150px;

	height: 70px;

	background-color: #754c24;

	display: block;

	position: relative;

	margin: 0 auto;



}

.btn-slide {

	background-color: green;

	width: 75px;

	height: 75px;

	position: absolute;

	display: block;

	margin: -75px 0 0 425px





}



.active {

	background-color: green;

}

</style>

</head>



<body>

<div id="all">

<div id="panel">

	<!-- you can put content here -->

</div>

<div class="anti"></div>

</div>

<div class="btn-slide"></div>



</body>

</html>

Сделал вот так, нужно чтобы зеленый квадратик в правом нижнем углу появлялся при наведени на серую область, а у меня он наоборот исчезает при наведении.

Как быть? ))

flenj добавил 12.12.2010 в 19:45

аа.. надо было display: none; поставить! и всё работает.

Google тестирует виджет погоды Google внёс изменения в Яндекс обновил мобильный браузер

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий