。jouse中的鼠標不工作

當鼠標在jquery中的對象函數上時，我試圖做出一個簡單的「一個項目淡出，另一個淡入」。不幸的是，它似乎並不奏效。這裏的JS：。jouse中的鼠標不工作

var fadeout = function(target) //fade out the logo and run fadein (fade in the skull) 
{ 
$(target +' .logo').fadeTo(400,0,fadein(target)); 
}; 

var fadein = function(target) //fade in the skull 
{ 
    $(target +' .skull').fadeTo(500,1); 
}; 

//trigger fadein when mouse is over an option 
$('#mortal').mouseover(fadeout('#mortal')); //mortal

當我審視Chrome的控制檯代碼它工作正常，但是當我將鼠標放置#mortal，什麼都不會發生。

下面是相關的HTML：

<div class="choice_option" id="mortal"> 
      <img class="logo" src="img\text\230px-WorldofDarknessLogo.png"></img> 
      <img class="skull" src="img\skulls\mortal.png"></img> 
</div>

及相關CSS：

.logo{ /* text logo in each choice_option */ 
position: absolute; 
z-index: 0; 
} 
.skull{ /* skull in each choice_option */ 
position: absolute; 
z-index: 1; 
opacity: 0; 
}

我缺少什麼？

來源

2014-04-22 Tyru

用作'$（'＃mortal'）。on（'mouseover'，fadeout（'＃mortal'））; // mortal' – Amit

你能爲此做些什麼嗎 – Sandeeproop

@Tyru當你用鼠標離開圖像時怎麼樣？它不應該淡出到原來的狀態嗎？ – JohanVdR

你的代碼是很複雜以上。設置mouseover處理程序時，只需使用callback參數。試試這個：

$('#mortal').mouseover(function() { 
    var $logo = $('.logo', this); 
    var $skull = $('.skull', this); 
    $logo.fadeOut(function() { 
     $skull.fadeIn(); 
    }); 
});

此外，img標籤應該是自閉：

<div class="choice_option" id="mortal"> 
    <img class="logo" src="img\text\230px-WorldofDarknessLogo.png" /> 
    <img class="skull" src="img\skulls\mortal.png" /> 
</div>

最後，.skull DIV應該是display: none，不opactiy: 0爲fadeIn或fadeOut工作。

Example fiddle

來源

2014-04-22 09:07:15

謝謝，這真的很好，它更簡單:)我對js很新，這給了我一些想法:) – Tyru

試試這個：

$(document).ready(function(){ 
    var fadeout = function(target) //fade out the logo and run fadein (fade in the skull) 
    { 
     $(target +' .logo').fadeTo(400,0,fadein(target)); 
    }; 

    var fadein = function(target) //fade in the skull 
    { 
     $(target +' .skull').fadeTo(500,1); 
    }; 

    $(document).on('mouseover', '#mortal', function(){ 
     fadeout('#mortal') 
    }); 
});

來源

2014-04-22 09:06:21

嘗試

$('#mortal').mouseenter(function() { 
    fadeout('#mortal'); 
});

來源

2014-04-22 09:06:29

包裝你的代碼的功能，使其工作。

它的工作！ http://jsfiddle.net/CYLcY/23/

.mouseover(
    function() { alert('working !'); 
        fadeout('#mortal')//mortal 
       });

來源

2014-04-22 09:08:46

使用應該首先將您的代碼包裝在方法中。另一件事正確地寫在淡入-fade語法出去特定對象

$("#mortal").mouseover(function(){ 

$('.logo').hide(); 

});

example

來源

2014-04-22 09:23:30

您需要連接淡出功能，在你的鼠標懸停。像這樣：

$('#mortal').mouseover(function(){ 
    fadeout('#mortal'); 
}); //mortal

來源

2014-04-22 09:48:19 user2143589

。jouse中的鼠標不工作

回答

相關問題