событие наведения курсора мыши jquery() не срабатывает при быстром наведении курсора мыши на ссылку
Вопрос
У меня есть простой список ссылок, и при наведении на него курсора он добавляет div (загружая данные в этот div из XML), а при наведении курсора он удаляет div, но это происходит только при медленном перемещении мыши по ссылкам. как только мышь перемещается по ссылкам быстрее, чем обычно, div не удаляется, что означает, что событие mouseout не было запущено
Агрессивно наведите курсор мыши на первые две ссылки, тогда вы увидите, что div несколько раз не скрывается
Вот ссылка на мою демо-версию http://ukcatonline.com/template/
Вот мой код:
$(document).ready(function () {
//vertical navigation js
$(".mainnav_v a").hover(
function (e) {
$this = $(this)
$this.stop().animate({ paddingLeft : '16px'}, 300);
var brand ="";
var category="designer_frames";
$this.each(function()
{
var title = this.title;
if ($this.is('a') && $this.attr('title') != '' && $this.attr('id')==category)
{
brand= this.title;
$.ajax({
type: "GET",
url: "xml/peek_menu.xml",
//ie bug : it send wrong datatype on localmachine
dataType: ($.browser.msie) ? "text" : "xml",
success: function(data) {
var xml;
if (typeof data == "string") {
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.loadXML(data);
} else {
xml = data;
}
//could have used $(xml).find(category).each(function() but jquery is intelligent enough to know wat element is currently selected
$(category, xml).each(
function(){
$(brand,this).each(
function(){
var title = $(this).attr('title');
var imgurl = $(this).attr('imgurl');
var description = $(this).find('description').text();
var feature1 = $(this).find('feature1').text();
var feature2 = $(this).find('feature2').text();
var feature3 = $(this).find('feature3').text();
var feature4 = $(this).find('feature4').text();
var html = '<div id="peek_container"><img src="' + imgurl + '" alt="" /><br /><br /><h1>'+title+'</h1><br />';
html += '<p>' + description + '</p><br />';
html += '<ul><li>'+feature1+'</li><li>'+feature2+'</li><li>'+feature3+'</li><li>'+feature4+'</li></ul><br /></div>';
$this.parent().append(html);
}
);
}
);
}
}
);
}
});
},
function (e) {
$this = $(this);
$this.stop().animate({ paddingLeft : '6px' }, 300);
$this.siblings().remove();
}
);});
Вот мой HTML-код:
<ul class="mainnav_v">
<li><a href="#url" class="peek" title="Boss" id="designer_frames">Boss</a></li>
<li><a href="#url" title="Burberry" id="designer_frames">Burberry</a></li>
<li><a href="#url" title="Bvlgari" id="designer_frames">Bvlgari</a></li>
<li><a href="#url">Chanel</a></li>
<li><a href="#url">Diesel</a></li>
<li><a href="#url">Dior</a></li>
Решение
Я не уверен на 100%, но мое внутреннее ощущение таково, что вызов функции для получения панели через ajax должен быть обратным вызовом функции анимации наведения.
Как и сейчас, анимация наведения "независима" от вызова ajax.
Я не пробовал этого, так что могу ошибаться.:P
Другие советы
Давайте рассмотрим оскорбительный порядок операций:
- Наведите курсор мыши - Запустите вызов Ajax
- Вывод мыши - удаление братьев и сестер
- успех ajax - добавить div.
Добавьте к этому тот факт, что вы не используете var $this
объявить $this
- следовательно, это глобально, $this
в вызове ajax может быть перезапись.
Вероятно, вам следует изменить свою функцию, чтобы создавать и добавлять <div>
перед вызовом ajax, а затем добавить к нему позже (добавлены комментарии):
$(document).ready(function () {
//vertical navigation js
$(".mainnav_v a").hover(function (e) {
// be sure to SCOPE your $this, so that the other function can't overwrite it
var $this = $(this)
$this.stop().animate({ paddingLeft : '16px'}, 300);
var brand ="";
var category="designer_frames";
$this.each(function() {
var title = this.title;
if ($this.is('a') && $this.attr('title') != '' && $this.attr('id')==category)
{
brand= this.title;
// create div BEFORE ajax call, and append it to dom in a hidden state
var $results = $("<div id='peek_container'/>").hide();
$this.parent().append($results);
$.ajax({
type: "GET",
url: "xml/peek_menu.xml",
//ie bug : it send wrong datatype on localmachine
dataType: ($.browser.msie) ? "text" : "xml",
success: function(data) {
var xml;
if (typeof data == "string") {
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.loadXML(data);
} else {
xml = data;
}
$(category, xml).each(function(){
$(brand,this).each(function(){
var title = $(this).attr('title');
var imgurl = $(this).attr('imgurl');
var description = $(this).find('description').text();
var feature1 = $(this).find('feature1').text();
var feature2 = $(this).find('feature2').text();
var feature3 = $(this).find('feature3').text();
var feature4 = $(this).find('feature4').text();
var html = '<img src="' + imgurl + '" alt="" /><br /><br /><h1>'+title+'</h1><br />';
html += '<p>' + description + '</p><br />';
html += '<ul><li>'+feature1+'</li><li>'+feature2+'</li><li>'+feature3+'</li><li>'+feature4+'</li></ul><br />';
// set the html of the results object we made.
$results.show().html(html);
});
});
}
});
}
});
},
function (e) {
var $this = $(this);
$this.stop().animate({ paddingLeft : '6px' }, 300);
$this.siblings().remove();
});
});
Используя console.log()
или каким-либо другим методом ведения журнала вы должны быть в состоянии определить, является ли mouseout
ведет огонь до того, как mouseover
завершено добавление контента или возникла другая проблема.