РЕДАКТИРОВАТЬ - РЕШЕНО.Решение внизу.
Я бился головой об кирпичную стену с этой проблемой весь день.Не гений с jQuery, поэтому извиняюсь, если уже есть ответ на этот вопрос - я не уверен, к чему стремиться, и я потратил время на поиск!
Я пытаюсь запустить две анимации наодна страница.Первая - это функция mousenter, mouseleave, которая дает эффект четырехстворчатой раздвижной двери:
$('.qitem').each(function () {
//grab the anchor and image path
url = $(this).find('a').attr('href');
img = $(this).find('img').attr('src');
//remove the image
$('img', this).remove();
//append four corners/divs into it
$(this).append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>');
//set the background image to all the corners
$(this).children('div').css('background-image','url('+ img + ')');
$(this).find('div.topLeft').css({top:0, left:0, width:pos , height:posHeight});
$(this).find('div.topRight').css({top:0, left:pos, width:pos , height:posHeight});
$(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:posHeight});
$(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:posHeight});
}).mouseenter(function () {
//animate the position
$(this).find('div.topLeft').stop(false,true).animate({top:negHeight, left:neg}, {duration:speed_out, easing:style_out});
$(this).find('div.topRight').stop(false,true).animate({top:negHeight, left:outHeight}, {duration:speed_out, easing:style_out});
$(this).find('div.bottomLeft').stop(false,true).animate({bottom:negHeight, left:neg}, {duration:speed_out, easing:style_out});
$(this).find('div.bottomRight').stop(false,true).animate({bottom:negHeight, left:outHeight}, {duration:speed_out, easing:style_out});
}).mouseleave(function () {
//put corners back to the original position
$(this).find('div.topLeft').stop(false,true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});
$(this).find('div.topRight').stop(false,true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in});
$(this).find('div.bottomLeft').stop(false,true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in});
$(this).find('div.bottomRight').stop(false,true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in});
}).click (function () {
//go to the url
window.location = $(this).find('a').attr('href');
});
Вторая - эффект светлячка, соответствующий код анимации здесь:
$.firefly.fly = function(sp) {
$(sp).animate({
top: $.firefly.random(($(window).height()-150)), //offsets
left: $.firefly.random(($(window).width()-150))
}, (($.firefly.random(10) + 5) * 1000),function(){ $.firefly.fly(sp) } );
};
Они обаработают отлично самостоятельно.Однако, когда я объединяю их, это становится немного странным.Мне кажется, что светлячок работает, имея 40 одновременных анимаций для каждого изображения светлячка, и назначает случайное направление каждому и одинаковую длительность для всех «светлячков».
Теперь, когда я ввожу мышью первый скрипт jQuery, «дверь» открывается нормально, анимация работает.Если мышь продолжает зависать над элементом 'qitem', то кажется, что когда анимация светлячка заканчивает свою текущую итерацию, вызывается событие mouseleave.
Как вторая анимация может воздействовать на первую, как это?Я думаю, что, возможно, в DOM есть какой-то «сброс», и указатель мыши должен быть снова обнаружен, поэтому кажется, что мышь «уходит».
Я надеюсь, чтообъяснил это хорошо - пожалуйста, попросите дальнейшие разъяснения, если они кажутся немного запутанными.
Заранее благодарен за любую помощь.
РЕДАКТИРОВАТЬ - РЕШЕНО
Хорошо, понял!
Как обычно, эти вещи всегда очень просты.Когда ты умеешь!Он читал каждый поток jQuery mouseleave / mouseenter, который я мог найти в stackoverflow, что привело меня к решению - z-index.
«Светлячки», когда они перемещались, находясь над элементом, связанным с событием mouseleave, таквызывая это.Все, что мне нужно было сделать - это убедиться, что у div уровня mouseleave z-индекс выше, чем у светлячков.Просто: -)