JQuery Анимация работает как раз первый раз

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'); 
    }) 
}); 

Итак, у меня есть проблемы с JQuery анимации:

Если я нажимаю на классе "этикеточной-внешней" всплывающее «select-word» открывается. Затем я нажимаю «select-word» по ссылке с классом «select-word-link». Всплывающее окно «select-word» закрывается, а затем открывается всплывающее окно «select». Затем я нажимаю кнопку закрытия «select» и закрывается.

Все, кажется, работает очень хорошо, за исключением того, что когда я пытаюсь снова щелкнуть по «label-external», ничего не происходит. Когда я проверяю хром, он применяет классы и видимость открытого всплывающего окна «select-word», но он просто ничего не показывает:/

Я думаю, что проблема, вероятно, в «$ («. Select-close » ") .click (function() {", но я просто не могу найти его.

Answer 1

Просто нужно было заменить все родительские функции: $ (this) .parents ('. select-word') Работает как шарм. Спасибо adeneo!