jQuery Animation只是第一次工作

jQuery Animation works just first time

本文关键字:第一次 工作 Animation jQuery      更新时间:2023-09-26

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动画有问题:

如果我单击类"标签外",则会打开弹出窗口"选择单词"。然后我点击带有"选择单词链接"类的链接上的"选择单词"。"选择词"弹出窗口关闭,然后打开"选择"弹出窗口。然后我单击"选择"的关闭按钮,它关闭了。

一切似乎都很好,除了当我再次尝试单击"标签外"时,没有任何反应。当我签入 chrome 时,它应用了打开的"选择词"弹出窗口的类和可见性,但它什么也没显示:/

我认为问题可能出在"$(".select-close").click(function() {"中,但我就是找不到它。

只需要将所有父函数替换为:$(this).parents('.select-word') 就像一个魅力。谢谢阿德尼奥!