Javascript jQuery动画只是第一次工作

HTML

因此，我对jquery动画有一个问题：

如果我点击类“标签外”弹出窗口“选择字”打开。然后我在一个链接上点击“selectwordlink”类。“选择单词”弹出窗口关闭，然后“选择”弹出窗口打开。然后我点击“选择”的关闭按钮，它就关闭了

一切似乎都很好，只是当我再次尝试点击“标签外部”时，什么都没有发生。当我签入chrome时，它应用了打开的“选择单词”弹出窗口的类别和可视性，但它什么也没有显示：/

---

我认为问题可能出在“$”（“.select close”）。单击（function（）{”但我就是找不到它。

只是将所有父函数替换为：$（this）。父函数（“.select word”）工作起来很有魅力。谢谢adeneo！

你用什么插件来制作这些动画？它的传输，你做了很多奇怪的事情，比如改变ID，然后瞄准它们，

.parent（）.parent（）.parent（）.parent（）.parent（）.parent（）

…等等。谢谢，就是这样！我只需要用一个函数替换所有的父函数$（这个）。家长（“.select word”）。谢谢！！：）

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

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