0

pessoal estou com um probleminha no meu append no js eu precisava substituir uma imagem por outra quando eu clicar em uma div ai quando eu clico a imagem setada via ID some normal porem a que deveria aparecer no lugar não aparece eu precisava que ela aparece no mesmo lugar da imagem que oculto segue meu código:

$('#lp-pom-image-1674').on('click', function(e) {
    $('#lp-pom-image-186').fadeOut('fast', function(){
        $('#lp-pom-image-186').append('<img src="http://d9hhrg4mnvzow.cloudfront.net/unbouncepages.com/home-                    teste/f6ffe5b8-logo-www-outubro.png" class="logo-center-outubro">');
    });
  });

Percebam que nome código no evento de click do id #lp-pom-image-1674 a imagem com o id #lp-pom-image-186 tem que sumir e ele some normalmente e nesse mesmo id ele da um append onde ele teria que colocar a minha imagem que esta dentro do img mais simplesmente não aparece isso precisa ser feito dessa forma alguem pode me ajudar?

10
  • 1
    Tente dar um $( "#lp-pom-image-186" ).empty(); antes do append.
    – BrTkCa
    10/10/2017 às 14:27
  • 1
    O problema não é porque você está dando um append em um elemento que acabou de receber o .fadeOut? Assim ele fica invisível e não aparece o que foi dado append. 10/10/2017 às 14:29
  • ficaria assim $('#lp-pom-image-186').empty().append('<img="teste">') 10/10/2017 às 14:29
  • 1
    Então depois do append exiba novamente o elemento 10/10/2017 às 14:32
  • 1
    Vou colocar como resposta 10/10/2017 às 14:34

2 Respostas 2

2

Você deve mostrar novamente a div que acabou de receber o .fadeOut, pois agora ela estará com display:none, ou seja, invisível. Antes de dar o append faça também uma limpeza da div com o .empty(), assim:

$(document).ready(function(){
  $('#teste').on('click', function(e) {
    $('#some').fadeOut('fast', function() {
      $('#some').empty();
      $('#some').append('<p>Opa, isso apareceu</p>');
      $('#some').fadeIn();
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="teste">Trocar elemento</button>

<div id="some">
  <p>Isso daqui vai sumir</p>
</div>

Em vez do .empty() e do .append(), você pode usar também o .html(), que já substitui o conteúdo da div diretamente.

2
  • Amigo obrigado pela resposta mais tipo acho que tem algum problema pois eu clico e meu elemento some mais não aparece o novo o que pode ser esse link e onde estou realizando os testes disso vc pode acessar e ver você mesmo por favor? basta clicar na setinha da direita ai vc vai ver o logo do header sumindo e o outro logo precisava parecer mais nao aparece unbouncepages.com/home-teste 10/10/2017 às 14:49
  • deixa queto acho que ja achei o problema 10/10/2017 às 14:51
1

Sugiro em vez de mudar a imagem toda, trocar somente o src e usar o load para só começar o próximo fadeIn depois de a imagem estar carregada.

Assim:

$('#lp-pom-image-1674').on('click', function(e) {
  $('#lp-pom-image-186').fadeOut(function() {
    $(this).load(function() {
      $(this).fadeIn();
    }).attr("src", "http://d9hhrg4mnvzow.cloudfront.net/unbouncepages.com/home-teste/f6ffe5b8-logo-www-outubro.png");
  });
});

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 .