Jquery - Fade em imagem

[Guilherme Oderdenge 42]

Olá, pessoal!

 

<script type="text/javascript">
$(function(){
$('#principal a')
	.css( {backgroundPosition: "0 0"} )
	.mouseover(function(){
		$(this).stop().animate({backgroundPosition:"(0 -19px)"}, {duration:500})
	})
	.mouseout(function(){
		$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
	})
</script>
<div id="menu">
<ul id="menu">
<li><a href="index.php?" id="principal"></a></li>
<li><a href="index.php?p=test">test</a></li>
<li><a href="index.php?p=test">test</a></li>
<li><a href="index.php?p=test">test</a></li>
<li><a href="index.php?p=test">test</a></li>
</ul>
</div>

 

O código jQuery eu fui fazendo aos poucos, juntando o que eu sabia e, infelizmente, não deu certo. O script simplesmente não funciona, ou seja, não exibe efeito nenhum.

Poderiam corrigir o(s) meu(s) erro(s)?

 

Desde já grato.

 

O efeito que eu quero é mudar a posição do background.

[André D. Molin 15]

Uma pergunta besta. Está incluindo no arquivo a biblioteca jQuery?

[Guilherme Oderdenge 42]

Yep. Tanto o ui do jQuery, quanto o próprio jQuery.

[Haz 3]

Você tá usando #principal a. Então ele procura algo do tipo:

<element id="principal">
 <a></a>
</element>

Se você quiser se referir a um elemento a com o id principal, tem que usar a#principal ou somente #principal, já que, em tese, só pode existir um elemento com determinado ID (o que você não seguiu quando colocou a div e a ul com o id menu - nesse caso é preferível usar uma class).

[Guilherme Oderdenge 42]

Você tá usando #principal a. Então ele procura algo do tipo:

<element id="principal">
 <a></a>
</element>

Se você quiser se referir a um elemento a com o id principal, tem que usar a#principal ou somente #principal, já que, em tese, só pode existir um elemento com determinado ID (o que você não seguiu quando colocou a div e a ul com o id menu - nesse caso é preferível usar uma class).

 

Olá, Haz. Obrigado pela resposta, meu rapaz!

Agora que vi que usei duas vezes um elemento id... falha precária minha.

 

Com relação ao código:

$function();
$('a#principal')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
	$(this).stop().animate(
		{backgroundPosition:"0 -19px"}, 
		{duration:500})
	})
.mouseout(function(){
	$(this).stop().animate(
		{backgroundPosition:"(0 0"}, 
		{duration:500})
	})

 

Você diria que assim é mais viável?

 

Se não, como posso fazer para fazer com que seja um código puro e que funcione?

 

Desde já, sou grato.

Abraços!

[Haz 3]

Tá funcionando?

Tem um caractere ( no valor do último backgroundPosition. Creio que não era pra ele estar lá :P

[Guilherme Oderdenge 42]

Tá funcionando?

Tem um caractere ( no valor do último backgroundPosition. Creio que não era pra ele estar lá :P

 

Não, não está funcionando.

Só alterei o ID para Class.

 

E quanto ao parentesis, já fora retirado. ;)

 

Algum conselho a mais?

 

Grato desde já.

Abraços!

[Haz 3]

Coloca o código entre:

$(function() {
...
});

Se o ID que você alterou pra class for o do a, então o seletor deve ser a.principal. Quando falei da class, estava me referindo a uma alternativa pra não repetir IDs. No caso do seu código, em relação ao ID menu, é melhor deixar ou na div OU na ul.

 

Se ainda assim não funcionar, é provável que backgroundPosition não seja suportado pelo método animate().