Question

我试图制作一个简单的＆＃34;一个项目淡出，另一个淡出＆＃34;当鼠标在jquery中的对象函数上时。不幸的是它似乎不起作用。这是js：

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;
}

我错过了什么？

Answer 1

你的代码非常复杂。您只需在设置callback处理程序时使用mouseover参数。试试这个：

$('#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

Answer 2

试试这个：

$(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')
    }); 
});

Answer 3

尝试

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

Answer 4

将代码包装在函数中以使其工作。

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

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

Answer 5

use首先应该将代码包装在一个方法中。另一件事是为特定对象

正确编写淡入淡出的语法

`

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

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

});

`

example

Answer 6

您需要在鼠标悬停中附加淡出功能。像这样：

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

.mouseover在jquery中不起作用

6 个答案: