私は本当に jQuery の経験がありませんが、チュートリアルを 1 週間読んでいて、これが私の最初のコードです。動作しますが、しばらくするとパフォーマンスが低下し始めます。特に、mouseenter/mouseleave アクションが連続して数回呼び出された場合。別の要素に移動するまで、遅延が増加するたびに。
jQuery でのパフォーマンスの悪さについてグーグルで検索しましたが、運がありませんでした。私が見つけた最高のヒントは、「クラスセレクターの代わりにIDを使用する(JQuery)」というヒントでしたが、それが問題になる理由がわかりません.idタグの「.photo」を置き換えるのは難しいと思いますいくつかの要素に影響を与えるはずです。
また、「一般的に、JavaScript は DOM をできるだけ検索したり変更したりしない方が高速です。」 それが私の問題でしょうか。
私のコードで何かおかしくなったり、何か考えがあれば教えてください。ありがとう!
コード
$(document).ready(function(){
$(".photo").mouseenter(function(){
$(this).fadeTo("fast", 0.9);
});
$(".photo").mouseleave(function(){
$(this).fadeTo("fast", 0.6);
});
$('.photo').click(function() {
$(this).animate({width: '900px'});
$(this).mouseleave(function(){
$(this).animate({width: '294px'});
});
});
$('.trigger').click(function() {
if( $("#5").is(":hidden") ) {
$("#6").hide('slow');
$('.trigger').fadeTo('slow', 0);
} else if ( $("#4").is(":hidden") ){
$("#5").hide('slow');
} else if ( $("#3").is(":hidden") ){
$("#4").hide('slow');
} else if ( $("#2").is(":hidden") ){
$("#3").hide('slow');
} else if ( $("#1").is(":hidden") ){
$("#2").hide('slow');
} else {
$("#1").hide('slow');
$(".triggerR").fadeTo('slow', 1);
}
});
$('.triggerR').click(function() {
if( $("#6").is(":hidden") ) {
$("#6").toggle('slow');
$(".trigger").fadeTo('slow', 1);
} else if( $("#5").is(":hidden") ) {
$("#5").toggle('slow');
} else if ( $("#4").is(":hidden") ){
$("#4").toggle('slow');
} else if ( $("#3").is(":hidden") ){
$("#3").show('slow');
} else if ( $("#2").is(":hidden") ){
$("#2").show('slow');
} else if ( $("#1").is(":hidden") ){
$("#1").show('slow');
$(".triggerR").fadeTo('slow', 0);
}
});
});