2

Não estou conseguindo usar o this aqui, pra ele identificar qual dos links eu estou passando o mouse, quando passo o mouse em um dos links ele ativa os dois links e isso não é pra acontecer. Também estou com problemas ao esconder .post-prev e .post-next.

HTML

<a href="#" class="btn-abs prev-new hide show_post">&#9668;</a>
<a href="#" class="btn-abs next-new hide show_post">&#9658;</a>

JS

$(document).ready(function () {

    $(".post-prev, .post-next").hide();

    $('.show_post').hover(function(){
        $('.post-prev, .post-next').animate({width: '20%'}, 300).show();
    }, function(){
        //$('.post-prev, .post-next').animate({width: '0'}, 300);
    });
});

1 Resposta 1

1

Sempre que passar o mouse por cima de um, vc reseta pra não visível os dois e depois apenas faz o efeito no item que está recebendo hover this.

Ao esconder, esconde apenas o item que vc saiu this ...

$(document).ready(function () {
    $('.show_post').hover(function(){
        $(".post-prev:visible, .post-next:visible").hide();

        $(this).animate({width: '20%'}, 300).show();
    }, function(){
        $(this).animate({width: '0'}, 300).hide();
    });
});
3
  • Bom eu coloquei visibility:hidden; nas classes .post-prev e .post-next até que funciona como deveriam o problema é que quando eu tiro o mouse de cima ele some também com a setinha que ativa o efeito Commented 14/04/2014 às 18:32
  • 2
    Coloca seu código no JSFIDDLE.COM que da pra analisar Commented 14/04/2014 às 18:42
  • segue jsfiddle.net/pabloworks/dZQLJ Commented 14/04/2014 às 19:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .