JQuery的懸停IMG調劑，鼠標移出

我需要我的jQuery腳本幫助，顯示鼠標懸停時和.conceptcontent上課的時候img變化，當鼠標離開img改回，但我可以隱藏.conceptcontent類？JQuery的懸停IMG調劑，鼠標移出

(function ($) { 
    $(".img-swap").hover(

     function() { 
      this.src = this.src.replace("_off", "_on"); 
       $(".conceptcontent").show("slow"); 
     }, 

     function() { 
      this.src = this.src.replace("_on", "_off"); 

     }); 

    var imgSwap = []; $(".img-swap").each(function() { 
     imgUrl = this.src.replace("_off", "_on"); 
     imgSwap.push(imgUrl); 
    }); 

    $(imgSwap).preload(); 
})(jQuery);

HTML

<title>Untitled Document</title> 

</head> 
<body> 
<!--background--> 
<div id="intro"> 
<h1 id="rubrik">Josef Carlsson</h1> 
</div> 


<div class="meny"> 
<div id="home"><img src="iconer/home_off.svg" class="img-swap"></div> 
<div id="about"><img src="iconer/ommig_off.svg" class="img-swap"></div> 
<div id="design"><img src="iconer/design_off.svg" class="img-swap"></div> 
<div id="internet"><img src="iconer/internet_off.svg" class="img-swap"></div> 
<div id="camera"><img src="iconer/kamera_off.svg" class="img-swap"></div> 
<div id="concept"><img src="iconer/koncept_off.svg" class="img-swap"></div> 
</div> 

<div class="menytext"> 
<div id="hometext">Start</div> 
<div id="abouttext">About me</div> 
<div id="designtext">Design</div> 
<div id="internettext">Webb</div> 
<div id="cameratext">Pictures</div> 
<div id="concepttext">Concepts</div> 
</div> 

<ul class="conceptcontent"> 
<li>emotion</li> 
<li>[in]sight</li> 
<li>will i make it</li> 
<li>trace</li> 
    <li>datemate</li> 
    <li>pacman</li> 
</ul>

這是HTML，這些會用來

來源

2013-04-10 Josef Carlsson

你能告訴我們html嗎？ – dewyze 2013-04-10 19:57:55

你不只是需要一個隱藏像你有節目（）？

編輯：我開始猜測動畫排隊了。我試圖複製試試這個：

(function($){ 
$(".img-swap").hover(
function(){this.src = this.src.replace("_off","_on"); 
     $(".conceptcontent").stop(true.true).show("slow");}, 

function(){this.src = this.src.replace("_on","_off"); 
      $(".conceptcontent").stop(true,true).hide("slow"); 

});

jQuery stop（）停止當前的動畫。

來源

2013-04-10 19:51:23 dewyze

我已經嘗試過，但腳本重複它自己，並在鼠標上.conceptcontent類是隱藏，然後重複顯示不知道爲什麼 – 2013-04-10 19:54:54

嘗試此新代碼與stop（）選項。 – dewyze 2013-04-12 03:44:23

它是否與stop（）選項一起使用？ – dewyze 2013-04-24 16:54:21

你可以用它來隱藏它

$(".conceptcontent").hide('slow');

來源

2013-04-10 19:51:37 darkfilo

是的，我已經嘗試過，但腳本重複自我，並在鼠標上.conceptcontent類是隱藏，然後重複顯示 – 2013-04-10 19:53:54

也許你可以嘗試掛鉤懸停事件，但.mouseenter（函數（）{.. 。}）;和.mouseleave（function（）{...}）; – darkfilo 2013-04-11 12:37:17

的你的鼠標懸停做了什麼會是相反的：

... 
$(".img-swap").hover(
    function(){ 
    this.src = this.src.replace("_off","_on"); 
    $(".conceptcontent").show("slow"); 
    }, 
    function(){ 
    this.src = this.src.replace("_on","_off"); 
    $(".conceptcontent").hide("slow"); 
    } 
); 
...

編輯： 我比別人慢類型...我認爲修復你的格式需要一兩分鐘;）

來源

2013-04-10 19:54:08 caponica

是的，我已經嘗試過，但腳本重複自我，並在鼠標上.conceptcontent類是隱藏，然後重複顯示 – 2013-04-10 19:55:45

它可能是重新啓動事件，因爲圖像被交換？嘗試將懸停事件處理程序分配給父元素（例如容器div）並查看是否有幫助。給父母分配一個固定的大小也不會傷害（防止div在短時間內縮小到零，並在加載新圖像之前觸發鼠標移出）。 – caponica 2013-04-10 19:59:12

向我們展示html，所以我們可以看到DOM中的div和imgs是相互關聯的。 – dewyze 2013-04-10 20:09:33

JQuery的懸停IMG調劑，鼠標移出

回答

相關問題