Problem using append js element does not appear

Question

Problem using append js element does not appear

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

I have a problem with my problem with my append no js I needed to replace one image with another when I click on a div ai when I click the image set via ID some normal but what should appear in the place does not appear I needed it to appear in the same place as the hidden image that follows my code:

$('#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">');
    });
  });

Notice that code name in the click event of the id #lp-pom-image-1674 the image with the id #lp-pom-image-186 has to disappear and it disappears normally and in that same id it append where it would have to put my image that is inside the img more simply does not appear it needs to be done that way can anyone help me?

javascript jquery

asked by anonymous 10.10.2017 / 16:26

2 answers

1

I suggest instead of changing the whole image, just change the src and use load to only start the next fadeIn after the image is loaded.

So:

$('#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");
  });
});

10.10.2017 / 16:42

Accessing variables from a struct Overload Error C #

score 2 · Accepted Answer

You should redisplay the div that just received the .fadeOut, since it will now be with display: none, that is, invisible. Before giving the append also do a div cleaning with .empty (), like this:

$(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><buttonid="teste">Trocar elemento</button>

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

Instead of .empty() and .append() , you can also use .html() , which already replaces the contents of the div directly.