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动画的问题：

如果我点击“label-outer”类，则弹出“select-word”打开。然后我点击“select-word-link”类链接上的“select-word”。关闭“select-word”弹出窗口，然后打开“select”弹出窗口。然后我点击“选择”的关闭按钮，然后关闭。

一切似乎工作得很好，除了当我再次尝试点击“label-outer”时没有任何反应。当我签入chrome时，它应用了打开的“select-word”弹出窗口的类和可见性，但它没有显示任何内容：/

我认为问题可能在“$（”。select-close“）中。click（function（）{”但是我找不到它。

Answer 1

只需用以下内容替换所有父函数：$（this）.parents（'。select-word'）就像魅力一样。谢谢adeneo！

jQuery Animation第一次工作

1 个答案: