jQuery Animation works just first time

Question

HTML

<div class="label">
  <div class="label-outer annotation-multi"><!-- Stuff --></div>

  <div class="select-word">
    <div class="select-content-front">
        <div class="select-content">
          <div class="select-content-main">
            <div id="select-word-4" class="select-word-link"><!-- Stuff --></div>
            <div id="select-word-5" class="select-word-link"><!-- Stuff --></div>
          </div>
        </div>
    </div>
  </div>

  <div id="select-4" class="select"><img class="select-close" src="img/close.svg" height="26" width="26"></img></div>
  <div id="select-5" class="select"><img class="select-close" src="img/close.svg" height="26" width="26"></img></div>

</div>

JS

 $('.label-outer.annotation-multi').click(function() {

        //Open "select-word" / Close

        if ($(this).parent().find('.select-word').css('visibility') == 'hidden') {

          $(this).parent().find('.select-word').css("visibility", "visible").css({
            transformOrigin: '150px 0px'
          }).transition({
            scale: 1,
            easing: 'easeOutExpo',
            duration: 600
          });
          //Annotation SelectWord schließen
        } else {
          $(this).parent().find('.select-word').css({
            transformOrigin: '150px 0px'
          }).transition({
            scale: 0,
            easing: 'easeOutExpo',
            duration: 600
          }, function() {
            $(this).parent().find('.select-word').removeAttr( 'style' );
          })
        }


        //Open Select-4 (Example)
        $(this).parent().find('.select').css({
          transformOrigin: '150px 0px'
        }).stop().transition({
          scale: 0,
          easing: 'easeOutExpo',
          duration: 600
        }, function() {
          $(this).parent().find('.select').css("visibility", "hidden");
        })

    });


    $('.select-word-link').click(function(){
        var selectID  = this.id.replace('-word', '');



    //Close select-word

                  $(this).parent().parent().parent().css({
                    transformOrigin: '150px 0px'
                  }).transition({
                    scale: 0,
                    easing: 'easeOutExpo',
                    duration: 600
                  }, function() {
                    $(this).parent().parent().parent().removeAttr( 'style' );
                  });


      //Open Select

          $("#"+selectID).css("visibility", "visible").css({
            transformOrigin: '150px 0px'
          }).stop().transition({
            scale: 1,
            easing: 'easeOutExpo',
            duration: 600
          });

    });


$(".select-close").click(function() {


  $(this).parent().parent().parent().parent().parent().parent().find('.select').css({
    transformOrigin: '150px 0px'
  }).stop().transition({
    scale: 0,
    easing: 'easeOutExpo',
    duration: 600
  }, function() {

    $(this).find('.select').removeAttr( 'style' );
  })
});

So, i have a problem with a jquery animation:

If i click on class "label-outer" the popup "select-word" opens. Then i click on "select-word" on a link with class "select-word-link". The "select-word" popup closes and then the "select" popup opens. Then i click on the close button of "select" and it closes.

Everything seems to be working just fine, except that when i try again to click on "label-outer" nothing happens. When i check in chrome, it applies the classes and visability of the open "select-word" popup, but it just shows nothing :/

I think that the problem is probably in the "$(".select-close").click(function() {" but i just cant find it.

Answer 1

Just had to replace all the parent functions with: $(this).parents('.select-word') Works like a charm. Thanks adeneo!