【IE】隣接したarea移動時にマウスオーバーが途切れないようにする

Tweet

Pocket

以下のようなHTMLとjQueryのとき、mapにareaが複数あると隣接していてもIEでは移動時にmouseoutとmouseoverが起きてしまいます。

<!--html-->
<img src="http://jsrun.it/assets/o/l/f/d/olfdl.gif" alt="" usemap="#link"><!--画像-->
<map name="link">
    <area shape="rect" coords="0,0,137,100" href="http://google.co.jp" alt="Google"><!--area1-->
    <area shape="rect" coords="138,0,275,100" href="http://yahoo.co.jp" alt="Yahoo"><!--area2-->
</map>

//js
$('map').hover(function(){
    $('img[usemap="#' + $(this).attr('name') + '"]').fadeTo(100,0.3);
},function(){
    $('img[usemap="#' + $(this).attr('name') + '"]').fadeTo(100,1);
});

解決策

jQueryの動作の前に.stop()を追加します。

$('map').hover(function(){
    $('img[usemap="#' + $(this).attr('name') + '"]').stop().fadeTo(100,0.3);
},function(){
    $('img[usemap="#' + $(this).attr('name') + '"]').stop().fadeTo(100,1);
});

[amazonjs asin=”4048913913″ locale=”JP” tmpl=”Small” title=”Web制作の現場で使うjQueryデザイン入門改訂新版 (WEB PROFESSIONAL)”]