Я успешно анимировал три элемента, используя 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
это просто MouseEnter то не будет работать? работают ли клики? Мне интересно, если проблема с делегацией, потому что вы перемещаете элемент вокруг, он думает, что он находится в другом месте для ввода. – PhilVarg
Это и то, и другое. Я попробовал несколько фильтров селектора. Интересно, связано ли это с Animate.css ... –
Я нашел преступника. Родительский div имеет css, установленный для переполнения скрытым, и это по какой-то причине предотвращает ответ div, выбранный jQuery. –