Problem using append js element does not appear

Asked

Viewed 272 times

0

I’m having a little problem in my append in the js I needed to replace one image with another when I click on one div then when I click the image set via ID some normal but the one that should appear in the place does not appear I needed it to appear in the same place the hidden image 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 the code name in the id click event #lp-pom-image-1674 the image with the id #lp-pom-image-186 has to disappear and he disappears normally and in that same id he gives a append where he would have to place my image inside the img but it just doesn’t show up it needs to be done that way someone can help me?

javascript jquery
  • 1

    Try to give a $( "#lp-pom-image-186" ).empty(); before the append.

  • 1

    The problem is not because you are giving an append to an element that has just received the . fadeOut? So it becomes invisible and does not appear what was given append.

  • would look like $('#lp-pom-image-186'). Empty(). append('<img="test">')

  • @Renatodiniz So I thought about it and reamente is this if I give an append on another element it works well so it gets in the wrong place it has to stay in the same place that was the image before it understands why I have to use the same id that received the fade

  • 1

    Then after the append displays the element again

  • @Renatodiniz with Fade in? is that still learning =3

  • @How would Renatodiniz look? this could put as an answer for me to understand better ?

  • That, do what the above friend said, first do . Empty(), then append and then a . fadein()

  • 1

    I’ll put it in answer

  • @Renatodiniz cool if you can do the code so I see how thank you

Show 5 more comments

2 answers

2


You should show again the div that just received the . fadeOut, because now it will be with display:None, ie invisible. Before giving the append also do a div cleaning with the . Empty(), thus:

$(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>

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

  • Friend thanks for the most type answer I think there is some problem because I click and my element disappears more does not appear the new what can be this link and where I am performing the tests of this you can access and see yourself please? just click on the right arrow so you’ll see the header logo disappearing and the other logo needed to look more does not appear http://unbouncepages.com/home-test/

  • let what I think I’ve found the problem

1

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

Thus:

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

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.