私はjQueryを始めたばかりで、いくつかのことに遭遇しています。サイトをアニメーション化し、slideDown ドロップ メニューを追加しました。問題は、ドロップ メニューが断続的に表示され、読み込みに時間がかかることです。それらをすべて個別のスクリプトに分解したためだと確信していますが、すべてを1セットのタグの間に入れようとすると、すべてが壊れます。ですから、これをより効率的にする方法を知りたいです。これが私が使用しているjQueryです...
<script src="jquery-1.10.1.js"></script>
<script>
$(document).ready(function() {
$(".info").hide();
$(".menu").hide();
$(".info").fadeIn(2000,
function() {$("#servdiv").slideDown(800,
function() {$("#condiv").fadeIn(800,
function() {$("#testdiv").fadeIn(800,
function() {$("#disdiv").fadeIn(800);});
});
});
});
return false;
});
</script>
<script>
$(document).ready(function() {
$(".fader").hide();
$(".phone").hide();
$(".slider").animate({height: 115}, {duration: 3000,
complete: function() { $(".fader").fadeIn({duration:3000,
complete: function() { $(".phone").fadeIn({duration: 3000,}); }}); }});
});
return false;
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#servdiv").hover(function() {
$("#servsub").slideDown('slow')
}, function() {
$("#servsub").slideUp('slow')
})
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#condiv").hover(function() {
$("#consub").slideDown('slow')
}, function() {
$("#consub").slideUp('slow')
})
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#testdiv").hover(function() {
$("#testsub").slideDown('slow')
}, function() {
$("#testsub").slideUp('slow')
})
});
</script>
ネストされたすべての関数が速度を低下させていると思いますが、連続したアニメーションを取得できる唯一の方法です。また、Chrome では見栄えがしますが、Firefox ではひどいものです。これをクリーンアップして、すばやくロードし、すべてのブラウザーで見栄えを良くする方法はありますか?
どんな助けにも感謝します!