JQuery Не работает должным образом

Question

Я пытаюсь выполнить подкачки с текстом, используя функцию .html() в JQuery. У меня возникают некоторые проблемы.

ПЕРВЫЙ:

Если мышь движется вокруг слишком быстро, то функция задерживается и не работает. OnHover даже, кажется, застрял на мыши, и onmouse не срабатывает.

HTML:

<table border=0 cellPadding=2 cellSpacing=5 width=100% class=showlangs> 
    <tr> 
     <td id="arabic"> 
      <img src="theImages/languages/arabic.png" /> 
     </td> 
     <td id="khmer"> 
      <img src="theImages/languages/khmer.png" /> 
     </td> 
    </tr> 
    <tr> 
     <td id="armenian"> 
      <img src="theImages/languages/armenian.png" /> 
     </td> 
     <td id="korean"> 
      <img src="theImages/languages/korean.png" /> 
     </td> 
    </tr> 
    <tr> 
     <td id="bengali"> 
      <img src="theImages/languages/bengali.png" /> 
     </td> 
     <td id="laotian"> 
      <img src="theImages/languages/laotian.png" /> 
     </td> 
    </tr> 
    <tr> 
     <td id="cantonese"> 
      <img src="theImages/languages/cantonese.png" /> 
     </td> 
     <td id="mandarin"> 
      <img src="theImages/languages/mandarin.png" /> 
     </td> 
    </tr> 
    <tr> 
     <td id="english"> 
      <img src="theImages/languages/english.png" /> 
     </td> 
     <td id="polish"> 
      <img src="theImages/languages/polish.png" /> 
     </td> 
    </tr> 
    <tr> 
     <td id="french"> 
      <img src="theImages/languages/french.png" /> 
     </td> 
     <td id="portugese"> 
      <img src="theImages/languages/portugese.png" /> 
     </td> 
    </tr> 
    <tr> 
     <td id="german"> 
      <img src="theImages/languages/german.png" /> 
     </td> 
     <td id="russian"> 
      <img src="theImages/languages/russian.png" /> 
     </td> 
    </tr> 
    <tr> 
     <td id="hindi"> 
      <img src="theImages/languages/hindi.png" /> 
     </td> 
     <td id="spanish"> 
      <img src="theImages/languages/spanish.png" /> 
     </td> 
    </tr> 
    <tr> 
     <td id="hmong"> 
      <img src="theImages/languages/hmong.png" /> 
     </td> 
     <td id="tagalog"> 
      <img src="theImages/languages/tagalog.png" /> 
     </td> 
    </tr> 
    <tr> 
     <td id="italian"> 
      <img src="theImages/languages/italian.png" /> 
     </td> 
     <td id="thai"> 
      <img src="theImages/languages/thai.png" /> 
     </td> 
    </tr> 
    <tr> 
     <td id="japanese"> 
      <img src="theImages/languages/japanese.png" /> 
     </td> 
     <td id="vietnamese"> 
      <img src="theImages/languages/vietnamese.png" /> 
     </td> 
    </tr> 
</table> 

JQuery:

$(document).ready(function() { 

    $("#arabic").hover(function(){ 
     $("#arabic").html('<b class="langs">ARABIC</b>'); 
     },function(){ 
     $("#arabic").html('<img src="theImages/languages/arabic.png" />'); 
    }); 
    $("#armenian").hover(function(){ 
     $("#armenian").html('<b class="langs">ARMENIAN</b>'); 
     },function(){ 
     $("#armenian").html('<img src="theImages/languages/armenian.png" />'); 
    }); 
    $("#bengali").hover(function(){ 
     $("#bengali").html('<b class="langs">BENGALI</b>'); 
     },function(){ 
     $("#bengali").html('<img src="theImages/languages/bengali.png" />'); 
    }); 
    $("#cantonese").hover(function(){ 
     $("#cantonese").html('<b class="langs">CANTONESE</b>'); 
     },function(){ 
     $("#cantonese").html('<img src="theImages/languages/cantonese.png" />'); 
    }); 
    $("#english").hover(function(){ 
     $("#english").html('<b class="langs">ENGLISH</b>'); 
     },function(){ 
     $("#english").html('<img src="theImages/languages/english.png" />'); 
    }); 
    $("#french").hover(function(){ 
     $("#french").html('<b class="langs">FRENCH</b>'); 
     },function(){ 
     $("#french").html('<img src="theImages/languages/french.png" />'); 
    }); 
    $("#german").hover(function(){ 
     $("#german").html('<b class="langs">GERMAN</b>'); 
     },function(){ 
     $("#german").html('<img src="theImages/languages/german.png" />'); 
    }); 
    $("#hindi").hover(function(){ 
     $("#hindi").html('<b class="langs">HINDI</b>'); 
     },function(){ 
     $("#hindi").html('<img src="theImages/languages/hindi.png" />'); 
    }); 
    $("#hmong").hover(function(){ 
     $("#hmong").html('<b class="langs">HMONG</b>'); 
     },function(){ 
     $("#hmong").html('<img src="theImages/languages/hmong.png" />'); 
    }); 
    $("#italian").hover(function(){ 
     $("#italian").html('<b class="langs">ITALIAN</b>'); 
     },function(){ 
     $("#italian").html('<img src="theImages/languages/italian.png" />'); 
    }); 
    $("#japanese").hover(function(){ 
     $("#japanese").html('<b class="langs">JAPANESE</b>'); 
     },function(){ 
     $("#japanese").html('<img src="theImages/languages/japanese.png" />'); 
    }); 
    $("#khmer").hover(function(){ 
     $("#khmer").html('<b class="langs">KHMER</b>'); 
     },function(){ 
     $("#khmer").html('<img src="theImages/languages/khmer.png" />'); 
    }); 
    $("#korean").hover(function(){ 
     $("#korean").html('<b class="langs">KOREAN</b>'); 
     },function(){ 
     $("#korean").html('<img src="theImages/languages/korean.png" />'); 
    }); 
    $("#laotian").hover(function(){ 
     $("#laotian").html('<b class="langs">LAOTIAN</b>'); 
     },function(){ 
     $("#laotian").html('<img src="theImages/languages/laotian.png" />'); 
    }); 
    $("#mandarin").hover(function(){ 
     $("#mandarin").html('<b class="langs">MANDARIN</b>'); 
     },function(){ 
     $("#mandarin").html('<img src="theImages/languages/mandarin.png" />'); 
    }); 
    $("#polish").hover(function(){ 
     $("#polish").html('<b class="langs">POLISH</b>'); 
     },function(){ 
     $("#polish").html('<img src="theImages/languages/polish.png" />'); 
    }); 
    $("#portugese").hover(function(){ 
     $("#portugese").html('<b class="langs">PORTUGESE</b>'); 
     },function(){ 
     $("#portugese").html('<img src="theImages/languages/portugese.png" />'); 
    }); 
    $("#russian").hover(function(){ 
     $("#russian").html('<b class="langs">RUSSIAN</b>'); 
     },function(){ 
     $("#russian").html('<img src="theImages/languages/russian.png" />'); 
    }); 
    $("#spanish").hover(function(){ 
     $("#spanish").html('<b class="langs">SPANISH</b>'); 
     },function(){ 
     $("#spanish").html('<img src="theImages/languages/spanish.png" />'); 
    }); 
    $("#tagalog").hover(function(){ 
     $("#tagalog").html('<b class="langs">TAGALOG</b>'); 
     },function(){ 
     $("#tagalog").html('<img src="theImages/languages/tagalog.png" />'); 
    }); 
    $("#thai").hover(function(){ 
     $("#thai").html('<b class="langs">THAI</b>'); 
     },function(){ 
     $("#thai").html('<img src="theImages/languages/thai.png" />'); 
    }); 
    $("#vietnamese").hover(function(){ 
     $("#vietnamese").html('<b class="langs">VIETNAMESE</b>'); 
     },function(){ 
     $("#vietnamese").html('<img src="theImages/languages/vietnamese.png" />'); 
    }); 
}); 

Так что, предполагают, чтобы случиться, например: Если я парить мышь над аравийской изображения, он должен заменить изображение с текст «ARABIC», и если я вытащу мышь, он должен заменить текст изображением. Но если я слишком быстро передвигаю мышь вокруг всех TD, то onmouseout не срабатывает. Также могу ли я иметь эффект fade in/out с событием onmouseover и onmouseout? (Делает его более фантазия)

ВТОРОГО: Я знаю, что есть способ сократить код JQuery выше, так что не занимают так много строк, потому что он делает то же самое для всех TD. Как бы я мог сократить код, если это возможно?

Answer 1

Вы также можете сохранить имя языка в альт-тексте изображения (и, следовательно, соответствовать требованиям ADA). Затем вы можете использовать селектор классов для своих элементов td и поменять текст с изображением. Это дает пользу тем, что по-прежнему относится к читателям экрана.

EDIT Поскольку у вас возникли проблемы со скоростью движения мыши, я рекомендую использовать .fadeIn и .fadeOut см альтернативный JavaScript ниже.

Итак, что-то похожее на следующее (and Fiddle):

Javascript/JQuery

$(document).on('mouseenter', '.showlangs td', function(event){ 
    var _img = $(this).find('img'); 
    var _lang = $(_img).prop('alt'); 
    $(this).append('<span class="hidden"><strong>' + _lang + '</strong></span>'); 
    var _txt = $(this).find('span'); 
    $(_img).fadeOut(); 
    $(_txt).fadeIn(); 
}); 

$(document).on('mouseleave', '.showlangs td', function(event){ 
    $(this).find('img').fadeIn(); 
    $(this).find('span').fadeOut(function(){ 
     $(this).remove(); 
    }); 
}); 

Alternate Javascript/JQuery

$(document).on('mouseenter', '.showlangs td', function(event){ 
    var _img = $(this).find('img'); 
    $(_img).hide(); 
    $(this).append('<b>' + $(_img).prop('alt') + '</b>'); 
}); 

$(document).on('mouseleave', '.showlangs td', function(event){ 
    $(this).find('b').remove(); 
    $(this).find('img').show(); 
}); 

EDIT: Подчищены ответ сокращать ва ll кода и используйте селектора документов афер.

Answer 2

$('table.showlangs td').hover(function() { 
    this.innerHTML = '<b class="langs">'+ this.id.toUpperCase() +'</b>'; 
, function() { 
    this.innerHTML = '<img src="theImages/languages/'+ this.id +'.png"/>'; 
}); 

Использование fadeIn и fadeOut методы:

$('table.showlangs td').hover(function() { 
    var $this = $(this), 
     content = $this.children('b').length 
        ? '<img src="theImages/languages/'+ this.id +'.png"/>' 
        : '<b class="langs">'+ this.id.toUpperCase() +'</b>'; 
    $this.fadeOut('fast', function() { 
     $this.html(content).fadeIn('fast'); 
    }) 
}); 

Answer 3

Я бы отказаться от использования JavaScript вместо CSS переходов, как браузер будет обрабатывать эти по себе лучше, чем когда-либо мог с JS. Это не будет работать, если вам нужно поддерживать переходы с помощью IE9-, но показ/скрытие все равно будут работать.

td strong, td img { 
    transition: opacity .5s; 
} 
strong { 
    opacity: 0; 
} 
td:hover img { 
    opacity: 0; 
} 
td:hover strong { 
    opacity: 1; 
} 

http://jsfiddle.net/sgjqZ/1/

Answer 4

Вы можете дать Id таблицу как

<table id="myTable" border=0 cellPadding=2 cellSpacing=5 width=100% class=showlangs> ... 

Затем вы можете использовать, что Id зацепить события

$("td", "#myTable").hover(function() { 
    $(this).find("img").hide(); 
    $(this).find("b").show(); 
}, function() { 
    $(this).find("img").show(); 
    $(this).find("b").hide(); 
}); 

.html() изменяет DOM и загружает новое изображение, которое может занять время, вместо этого вы должны включить объект, но скрыть/показать его

<tr> 
    <td id="arabic"> 
     <img src="theImages/languages/arabic.png" /> 
     <b class="langs" style="display: none;">ARABIC</b> 
    </td> 
    ... 
</tr>