2015-10-08 1 views
0

Я успешно анимировал три элемента, используя jQuery, но после анимации я не могу получить к ним доступ. У меня есть три изображения справа от VP и doc слева, показывающие половину изображения. Я хотел бы, чтобы изображение поднималось, чтобы полностью отображать наведение мыши. Я просмотрел SO и мои уроки на lynda.com и udemy.com безрезультатно. Может быть, я слишком специфичен.Почему я не могу получить доступ к элементу после его анимации в jQuery и Animate.css?

$(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 
+0

это просто MouseEnter то не будет работать? работают ли клики? Мне интересно, если проблема с делегацией, потому что вы перемещаете элемент вокруг, он думает, что он находится в другом месте для ввода. – PhilVarg

+0

Это и то, и другое. Я попробовал несколько фильтров селектора. Интересно, связано ли это с Animate.css ... –

+0

Я нашел преступника. Родительский div имеет css, установленный для переполнения скрытым, и это по какой-то причине предотвращает ответ div, выбранный jQuery. –

ответ

0

Я нашел исправление. Я заменил z-индекс непрозрачностью .99. Я использую это поверх элементов sibling, которые имеют меньший z-индекс, чем родительский элемент. Я вытягивал свои волосы об этом и, наконец, сделал то, что должен был сделать с самого начала, - обратитесь к документам. Вот где я нашел ответ

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

Смежные вопросы