Question

我已经使用jQuery成功动画了三个元素，但在动画之后我无法访问它们。我有三张图片从VP右侧进入，左侧是doc，显示图像的一半。我希望图像在鼠标悬停时完全显示。我已经浏览了lynda.com和udemy.com上的SO和我的教程无济于事。也许我太具体了。

$(document).ready(function(){

    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
    var animationIn = 'animated slideInUp';

    $('#tab1').addClass(animationIn).one(animationEnd, function(){
      $(this).removeClass(animationIn);
      $(this).animate({
        top : '78%',
        left: '10%',
        opacity: .75},
        2000, function() {

        $('#tab2').css({'display': 'block', '-webkit-animation-delay': '2s'}).addClass(animationIn).one(animationEnd, function(){
          $(this).removeClass(animationIn);
          $(this).animate({
            top: '78%',
            left: '22%',
            opacity: .75 },
            2000, function() {

            $('#tab3').css({'display': 'block', '-webkit-animation-delay': '2s'}).addClass(animationIn).one(animationEnd, function(){
              $(this).removeClass(animationIn);
              $(this).animate({
                top: '78%',
                left: '34%',
                opacity: .75
              },2000);
            });
          });
        });
      });
    });

    //I have tried various selector methods 
    $('.header-container').find('#tab1').mouseenter(function() {
      console.log('mouse enter');    
    });

    //I tried the obvious also 
    $('#tab1').mouseenter(function(){
      console.log('mouse enter');
    });
});//end $(docunemt).ready

Answer 1

我找到了解决办法。我用不透明度.99替换了z-index。我在兄弟元素之上使用它，这些元素的z-index比父元素小。我一直在讨论这个问题，最后做了我应该从头开始做的事情 - ＆gt;参考文档。这是我找到答案的地方

[https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index][1]

为什么我不能在jQuery和Animate.css中动画后访问它？

1 个答案: