前提
リストのそれぞれのリンクをホバーしたさいに、別の場所にある2つの画像が切り替わるようにしています。
実現したいこと
リンクをホバーした際に、前の画像がちらっと出てくるのをなくしたいです。
<section id="business"> <div class="business_img1"><img width="100%"></div> <div class="business_text"> <h3 class="aboutus_title1">02 - BUSINESS</h3> <h2>仕事を知る</h2> <ul class="business_list"> <li class="trigger1"><a href="survey_machine.php"><span>01</span>測量機販売・レンタル・メンテナンス</a></li> <li class="trigger2"><a href="industrial_measrement.php"><span>02</span>計測器販売</a></li> <li class="trigger3"><a href="copy_rental.php"><span>03</span>複合機レンタル・メンテナンス</a></li> <li class="trigger4"><a href="office_equipment.php"><span>04</span>OA事務機器</a></li> <li class="trigger5"><a href="copy_scan.php"><span>05</span>コピー・スキャニング</a></li> <li class="trigger6"><a href="3d_measurement.php"><span>06</span>3次元計測・モデル作成</a></li> <li class="trigger7"><a href="http://kameta.co.jp/ntplab/"><span>07</span>新技術推進研究所</a></li> <li class="trigger8"><a href="sell_stoking.php"><span>08</span>販売先・仕入れ先を見る</a></li> </ul> </div> <div class="business_img2"><img src="img/test2.jpg" class="Img"></div> </section>
javascript
$(function(){ var img0="img/index_defo1.png"; var img1="img/index_measurement1.png"; var img2="img/index_defo1.png"; var img3="img/index_copy_rental1.png"; var img4="img/index_OA1.png"; var img5="img/index_copyscan1.png"; var img6="img/index_3d_measurement1.png"; var img7="img/index_ntplab1.png"; var img8="img/index_3d_measurement1.png"; $(".business_img1 img").attr({"src": img0}); //.triggerホバーで画像切替 $(".trigger1").hover( function(){ $(".business_img1 img").fadeOut(400).queue(function(){ $(this).attr({"src": img1}).fadeIn(400).dequeue(); }); }, function(){ $(".business_img1 img").fadeOut(400).queue(function(){ $(this).attr({"src": img0}).fadeIn(400).dequeue(); }); } ); //.triggerホバーで画像切替 $(".trigger2").hover( function(){ $(".business_img1 img").fadeOut(400).queue(function(){ $(this).attr({"src": img2}).fadeIn(400).dequeue(); }); }, function(){ $(".business_img1 img").fadeOut(400).queue(function(){ $(this).attr({"src": img0}).fadeIn(400).dequeue(); }); } ); //.triggerホバーで画像切替 $(".trigger3").hover( function(){ $(".business_img1 img").fadeOut(400).queue(function(){ $(this).attr({"src": img3}).fadeIn(400).dequeue(); }); }, function(){ $(".business_img1 img").fadeOut(400).queue(function(){ $(this).attr({"src": img0}).fadeIn(400).dequeue(); }); } ); //.triggerホバーで画像切替 $(".trigger4").hover( function(){ $(".business_img1 img").fadeOut(400).queue(function(){ $(this).attr({"src": img4}).fadeIn(400).dequeue(); }); }, function(){ $(".business_img1 img").fadeOut(400).queue(function(){ $(this).attr({"src": img0}).fadeIn(400).dequeue(); }); } ); //.triggerホバーで画像切替 $(".trigger5").hover( function(){ $(".business_img1 img").fadeOut(400).queue(function(){ $(this).attr({"src": img5}).fadeIn().dequeue(); }); }, function(){ $(".business_img1 img").fadeOut(400).queue(function(){ $(this).attr({"src": img0}).fadeIn(400).dequeue(); }); } ); //.triggerホバーで画像切替 $(".trigger6").hover( function(){ $(".business_img1 img").fadeOut(400).queue(function(){ $(this).attr({"src": img6}).fadeIn(400).dequeue(); }); }, function(){ $(".business_img1 img").fadeOut(400).queue(function(){ $(this).attr({"src": img0}).fadeIn(400).dequeue(); }); } ); //.triggerホバーで画像切替 $(".trigger7").hover( function(){ $(".business_img1 img").fadeOut(400).queue(function(){ $(this).attr({"src": img7}).fadeIn(400).dequeue(); }); }, function(){ $(".business_img1 img").fadeOut(400).queue(function(){ $(this).attr({"src": img0}).fadeIn(400).dequeue(); }); } ); //.triggerホバーで画像切替 $(".trigger8").hover( function(){ $(".business_img1 img").fadeOut(400).queue(function(){ $(this).attr({"src": img8}).fadeIn(400).dequeue(); }); }, function(){ $(".business_img1 img").fadeOut(400).queue(function(){ $(this).attr({"src": img0}).fadeIn(400).dequeue(); }); } );}); //右側画像ホバー時---------------------------------------------------------------------------------------- $(function(){ var img0="img/index_defo2.png"; var img1="img/index_measurement2.png"; var img2="img/index_OA2.png"; var img3="img/index_copy_rental2.png"; var img4="img/index_OA2.png"; var img5="img/index_copyscan2.png"; var img6="img/index_3d_measurement2.png"; var img7="img/index_ntplab2.png"; var img8="img/index_defo2.png"; $(".business_img2 img").attr({"src": img0}); //.triggerホバーで画像切替 $(".trigger1").hover( function(){ $(".business_img2 img").fadeOut(400).queue(function(){ $(this).attr({"src": img1}).fadeIn(400).dequeue(); }); }, function(){ $(".business_img2 img").fadeOut(400).queue(function(){ $(this).attr({"src": img0}).fadeIn(400).dequeue(); }); } ); //.triggerホバーで画像切替 $(".trigger2").hover( function(){ $(".business_img2 img").fadeOut(400).queue(function(){ $(this).attr({"src": img2}).fadeIn(400).dequeue(); }); }, function(){ $(".business_img2 img").fadeOut(400).queue(function(){ $(this).attr({"src": img0}).fadeIn(400).dequeue(); }); } ); //.triggerホバーで画像切替 $(".trigger3").hover( function(){ $(".business_img2 img").fadeOut(400).queue(function(){ $(this).attr({"src": img3}).fadeIn(400).dequeue(); }); }, function(){ $(".business_img2 img").fadeOut(400).queue(function(){ $(this).attr({"src": img0}).fadeIn(400).dequeue(); }); } ); //.triggerホバーで画像切替 $(".trigger4").hover( function(){ $(".business_img2 img").fadeOut(400).queue(function(){ $(this).attr({"src": img4}).fadeIn(400).dequeue(); }); }, function(){ $(".business_img2 img").fadeOut(400).queue(function(){ $(this).attr({"src": img0}).fadeIn(400).dequeue(); }); } ); //.triggerホバーで画像切替 $(".trigger5").hover( function(){ $(".business_img2 img").fadeOut(400).queue(function(){ $(this).attr({"src": img5}).fadeIn(400).dequeue(); }); }, function(){ $(".business_img2 img").fadeOut(400).queue(function(){ $(this).attr({"src": img0}).fadeIn(400).dequeue(); }); } ); //.triggerホバーで画像切替 $(".trigger6").hover( function(){ $(".business_img2 img").fadeOut(400).queue(function(){ $(this).attr({"src": img6}).fadeIn(400).dequeue(); }); }, function(){ $(".business_img2 img").fadeOut(400).queue(function(){ $(this).attr({"src": img0}).fadeIn(400).dequeue(); }); } ); //.triggerホバーで画像切替 $(".trigger7").hover( function(){ $(".business_img2 img").fadeOut(400).queue(function(){ $(this).attr({"src": img7}).fadeIn(400).dequeue(); }); }, function(){ $(".business_img2 img").fadeOut(400).queue(function(){ $(this).attr({"src": img0}).fadeIn(400).dequeue(); }); } ); //.triggerホバーで画像切替 $(".trigger8").hover( function(){ $(".business_img2 img").fadeOut(400).queue(function(){ $(this).attr({"src": img8}).fadeIn(400).dequeue(); }); }, function(){ $(".business_img2 img").fadeOut(400).queue(function(){ $(this).attr({"src": img0}).fadeIn(400).dequeue(); }); } );});
試したこと
秒数を変更したりしましたが、切り替わる際にどうしても前の画像が出てきてしまいます。
お分かりの方いらっしゃいましたら、ご教唆お願いいたします。

0 コメント