jQuery1.XでslideDown()の挙動がおかしい・開かなくなるの対処法

サイトのナビゲーションなどで､ホバーで展開するプルダウンメニューやメガドロップダウンメニューを作りたいとき

こういうjQueryを書くと思います｡

$(".menu").hover(
	function(){
		$(".cont").stop().slideDown();
	},
	function() {
		$(".cont").stop().slideUp();
});

実際に作成したのがこちら｡ホバーしてみてください｡

このサイトのjQueryバージョンは3.4.0なので問題ありませんが

slideDown()とslideUp()が jQueryバージョン1.Xだとバグる んですよね｡

jQuery1.4での再現です｡ホバーしたり離したりしてみてください｡

iframeが正しく表示されない方はこちら

繰り返していると､開けなくなりませんか？

hover()イベントだけでなく､mouseenter()とmouseleave()を使った場合でも同様です｡

最新のjQueryを使えばいいだけなのですが､そういう訳にはいかない場合の対処法をご紹介します｡

PR

$(".menu").hover(
	function(){
		$(".cont").css("height", "").stop().slideDown();
	},
	function() {
		$(".cont").css("height", "").stop().slideUp();
});