2 replies to this topic

[Sprite]

Eu tenho uma lista com o atributo style="background-image:url(etc)" diferente em cada elemento <a> e um script que cria um <span></span> depois do <a> para criar um efeito de fade-in / fade-out em vez de um simples :hover... Como o background-image é um estilo inline, eu teria que copiá-lo para o <span> que é criado depois do <a> para ter o efeito.... O problema é que quando a função roda o .parent().attr("style") ele não pega o atrbituo style="" do elemento pai, ou seja, do <a> que está contendo o <span> para cada <li>, mas apenas o do primeiro <a>!

Vejam como está funcionando:

Em código:

if ($.browser.msie && $.browser.version < 7) return;    $('#navigation li')    .removeClass('highlight')    	.find('a')    .append('<span class="hover" />').each(function () {      var $span = $('span.hover', this).attr('style', $("span.hover").parent().attr("style"));      var $span = $('> span.hover', this).css('opacity', 0);							      $(this).hover(function () {        $span.stop().fadeTo(500, 1);      }, function () {        $span.stop().fadeTo(500, 0);      });    });	});</script>

O HTML normal:

<ul id="navigation">      <li class="highlight">        <a href="#" class="triplov" style="background-image:url(images/1.jpg);"><h2>Item #1</h2></a>      </li>      <li class="highlight">        <a href="#" class="unico" style="background-image:url(images/2.jpg);"><h2>Item #2</h2></a>      </li>      <li class="highlight">        <a href="#" class="unico" style="background-image:url(images/3.jpg);"><h2>Item #3</h2></a>      </li>    </ul>

Como deveria ficar:

<ul id="navigation">      <li class="">        <a href="#" class="triplov" style="background-image:url(images/1.jpg);"><h2>Item #1</h2>        <span class="hover" style="background-image: url(images/1.jpg); opacity: 1;"/></a> //aqui está o :hover e fade acontecendo      </li>      <li class="">        <a href="#" class="unico" style="background-image:url(images/2.jpg);"><h2>Item #2</h2>        <span class="hover" style="background-image: url(images/2.jpg); opacity: 0;"/></a>      </li>      <li class="">        <a href="#" class="unico" style="background-image:url(images/3.jpg);"><h2>Item #3</h2>        <span class="hover" style="background-image: url(images/3.jpg); opacity: 0;"/></a>      </li></ul>

Mas ele retorna assim:

<ul id="navigation">      <li class="">        <a href="#" class="triplov" style="background-image:url(images/1.jpg);"><h2>Item #1</h2>        <span class="hover" style="background-image: url(images/1.jpg); opacity: 1;"/></a>      </li>      <li class="">        <a href="#" class="unico" style="background-image:url(images/2.jpg);"><h2>Item #2</h2>        <span class="hover" style="background-image: url(images/1.jpg); opacity: 0;"/></a>      </li>      <li class="">        <a href="#" class="unico" style="background-image:url(images/3.jpg);"><h2>Item #3</h2>        <span class="hover" style="background-image: url(images/1.jpg); opacity: 0;"/></a>      </li></ul>

Ele só pega o background-image do 1º <a> e não dos seguintes! Procurando sobre a função .each() eu acabei encontrando o seguinte:

Each getter only returns the value of the first element of the collection.

Alguma idéia ou solução?

Edição feita por: Sprite, 19/08/2009, 15:03.

[Sprite]

Olá, consegui resolver o problema da seguinte forma: criando outro <span> dentro do <span> que controla a opacidade e carregando o atributo style dentro desta tag, assim:

[codebox]$(function () {
if ($.browser.msie && $.browser.version < 7) return;
$('#navigation li')
.removeClass('highlight')
.find('a')
.append('<span class="hover" />').each(function () {
var $src = $(this).attr("style");
var $work = $('> span.hover', this).attr('style', $src);
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(500, 0.8);
}, function () {
$span.stop().fadeTo(500, 0);
});
});
});[/codebox]

No fim das contas eu estava sendo redundante mas isso foi bom para que eu aprendesse um pouco de jQuery que eu não sabia nada. O motivo de precisar de um estilo inline no <a> era porque as background-images seriam definidas num sistema em PHP. Porém seria mais conveniente que eu jogasse as classes e os backgrounds num arquivo CSS gerado pelo próprio sistema, já que estes destaques seriam definidos apenas uma vez por semana!
Não sei mais o que otimizar pois o efeito trabalha apenas com o background-position então não é um efeito de :hover comum. Claro que com o javascript desabilitado funcionaria um :hover padrão nos limites do navegador..

Edição feita por: Sprite, 19/08/2009, 15:03.