Помощ jquery Скрипт fade

L

Loopko

Registered
CSS:
Код: 
 ul { position: relative; left: 16px; }
 ul li { cursor: pointer; }
 .nohov{ width: 167px; height: 26px; }
 ul li a, a:link, a:visited { position: relative; top: 5px; left: 30px; color: #7f5227; font-weight: bold; font-size: 12px;  }
 ul li a:hover { position: relative; top: 5px; left: 30px; color: #70411c; font-weight: bold; font-size: 12px; }
 .yeshov { background: #000 no-repeat; width: 167px; height: 26px; }

html:
Код: 
<ul>
<li onMouseOver="this.className='yeshov'" onMouseOut="this.className='nohov'" class="nohov"><a href="">Some Link</a></li>
</ul>

Този код прави това, че като си сложиш мишката шърху <li>-то и се сменя бекраунда.
Искам ако може някой да ми даде такъв код с jquery и
отдоло бекраунда да се показва с fade

Ще съм много благодарен.
 
style:
Код: 
.back {
			position: absolute;
			top: 0;
			left: 0;
			width: 100px;
			height: 35px;
			background: #000;
			display: none;
			z-index: -1;
		}
		
		ul {
			margin: 20px;
			padding: 0;
			list-style: none;
			position: relative;
width: 100px;
		}
		a {
			display: block;
			border: 1px solid red;
			width: 100px;
			height: 35px;
		}

body:
Код: 
<ul>
		<li><div class="back"></div><a href="#">Link</a></li>
	</ul>

script:
Код: 
$(function() {
			$('li').hover(function() {
				$(this).children('.back:not(:animated)').fadeIn(800);
			}, function() {
				$(this).children('.back').fadeOut(800);
			});
		});
Ако не става пишете.
Поправих го че имаше малък бъг.
 
Нестава. Доста е бъгав кода. Не фейдва ии при махане на мишката
си остава черено Полето дето е....
 
Не може да не става. При мен всичко си върви. Аз си едитнах един път мнението, сигурен ли си че не си копнал миналото, защото там наистина бях забравил да премахвам дива при отместване на мишката?
 
Код: 
<head>
<title>TESTING</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() { 
         $('li').hover(function() { 
            $(this).children('.back:not(:animated)').fadeIn(800); 
         }, function() { 
            $(this).children('.back').fadeOut(800); 
         }); 
      });
</script>
<style type="text/css">
	.back { 
	width: 100px; 
	height: 35px; 
	background: #000; 
	display: none;
	} 
       
	ul { 
	margin: 20px; 
	padding: 0; 
	list-style: none;
	width: 100px; 
	} 
	a { 
         display: block; 
         border: 1px solid red; 
         width: 100px; 
         height: 35px; 
	}
</style>
</head>
<body>
<ul> 
      <li><div class="back"></div><a href="#">Link</a></li> 
   </ul> 
</body>

Ето... това ми е кода
 
В дивът back не трябва да имаш съдържание. И в css му задай; position: absolute; top: 0; left: 0 , както и на ul задай position: relative;
Ето целия код:
Код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>
	<title>Web page</title>
	<style type="text/css">
	.back {
         position: absolute;
         top: 0;
         left: 0;
         width: 100px;
         height: 35px;
         background: #000;
         display: none;
         z-index: -1;
      }
      
      ul {
         margin: 20px;
         padding: 0;
         list-style: none;
         position: relative;
		 width: 100px;
      }
      a {
         display: block;
         width: 100px;
         height: 35px;
		 color: #555;
		 text-align: center;
		 line-height: 32px;
      }
	</style>
	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	<script type="text/javascript">
			$(function() {
				 $('li').hover(function() {
					$(this).children('.back:not(:animated)').fadeIn(800);
				 }, function() {
					$(this).children('.back').fadeOut(800);
				 });
			  });
	</script>
</head>

<body>
	
		
	<ul>
      <li><div class="back"></div><a href="#">Link</a></li>
   </ul>
	
	
		
</body>

</html>

Забележи че в css на линковете не съм задал background, и .back има z-index: -1; Копни първо така кода(само си смени пътя до jquery библиотеката). :wink:
 
Междодругото, работи, но бачка само с едно ли
Като направя други, и само на първото се появява.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>
<title>Web page</title>
<style type="text/css">
.back {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 35px;
background: #000;
display: none;
z-index: -1;
}

ul {
margin: 20px;
padding: 0;
list-style: none;
position: relative;
width: 100px;
}
a {
display: block;
width: 100px;
height: 35px;
color: #555;
text-align: center;
line-height: 32px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$('li').hover(function() {
$(this).children('.back:not(:animated)').toggle('200');
}, function() {
$(this).children('.back').toggle('100');
});
});
</script>
</head>

<body>


<ul>
<li><div class="back"></div><a href="#">Link</a></li>
<li><div class="back"></div><a href="#">Link</a></li>
<li><div class="back"></div><a href="#">Link</a></li>
</ul>



</body>

</html>
Увеличете...
Ето виж сам
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе