JQuery NaNpx hiba?
Animálni szeretnék jQueryben, és több értéket megadni az animate függvénynek. 3 értéket adtam meg az Opacity, Color és Background értéket, de ezekből, csak az opacity-t ismeri fel, a másik kettőnél NaNpx hibát ír ki. Miért? Tanács?
Képek:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Főoldal</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="first_style.css">
<script language="JavaScript" type="text/javascript" src="js/js.js"></script>
<script language="JavaScript" type="text/javascript" src="js/plugin.js"></script>
</head>
<body>
<nav id="menu">
<ul>
<a href="" class="menu_01"><li>Főoldal</li></a>
<a href="" class="menu_02"><li>Magamról</li></a>
<a href="" class="menu_03"><li>A célom</li></a>
<a href="" class="menu_04"><li>Blog</li></a>
<a href="" class="menu_05"><li>:)</li></a>
</ul>
</nav>
<div id="content"></div>
<div id="bg">Ha húzná a szemed katt ide!</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
body {
background: url(img/background.png);
}
#menu {
margin: 2% 10px 10px 10.5%;
}
#menu ul {
float: left;
list-style: none;
list-style-type: none;
}
#menu ul a {
padding: 10px 0;
opacity: 0.5;
background: #ddd;
text-decoration: none;
text-align: center;
}
#menu ul li {
display: inline-block;
margin: 10px 0 10px 0;
width: 200px;
font-family: Arial Black;
font-size: 20px;
color: black;
}
#content {
display: inline-block;
margin: 7% 0 20px 20%;
background: #fff;
width: 60%;
height: 400px;
border-radius: 20px;
}
#bg {
display: inline-block;
margin: 2% 10px 10px 34.4%;
width: 400px;
background: #000;
color: #fff;
text-align: center;
border-radius: 5px;
}
jQuery:
$(document).ready(function() {
$("#menu ul .menu_01").mouseenter(function() {$("#menu ul .menu_01").animate({'opacity':'1'}, 300);});
$("#menu ul .menu_01").mouseleave(function() {$("#menu ul .menu_01").animate({'opacity':'0.5'}, 900);});
$("#menu ul .menu_02").mouseenter(function() {$("#menu ul .menu_02").animate({'opacity':'1'}, 300);});
$("#menu ul .menu_02").mouseleave(function() {$("#menu ul .menu_02").animate({'opacity':'0.5'}, 900);});
$("#menu ul .menu_03").mouseenter(function() {$("#menu ul .menu_03").animate({'opacity':'1'}, 300);});
$("#menu ul .menu_03").mouseleave(function() {$("#menu ul .menu_03").animate({'opacity':'0.5'}, 900);});
$("#menu ul .menu_04").mouseenter(function() {$("#menu ul .menu_04").animate({'opacity':'1'}, 300);});
$("#menu ul .menu_04").mouseleave(function() {$("#menu ul .menu_04").animate({'opacity':'0.5'}, 900);});
$("#menu ul .menu_05").mouseenter(function() {$("#menu ul .menu_05").animate({'opacity':'1'}, 300);});
$("#menu ul .menu_05").mouseleave(function() {$("#menu ul .menu_05").animate({'opacity':'0.5'}, 900);});
$("#bg").click(function() {$("#body").animate({'background':'#000'}, 900);});
});
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!