Question

我想在我的网页中创建一个菜单，其中每个列表项都由图像表示。当鼠标指向其中一些图像时，此图像应淡出并被另一个图像替换（我认为fadeIn（）会很有用）。

HTML code：

<ul id="buttons">`    
    <li><a href="#" onmouseover="change(1)" onmouseout="ret(1)">  
        <img src="button01.png" id="button01_1" />
        <img src="button01_hover.png" id="button01_2"/>  
    </a></li>
    <li><a href="#" onmouseover="change(2)" onmouseout="ret(2)">  
        <img src="button02.png" id="button02_1" />
        <img src="button02_hover.png" id="button02_2"/>  
     </a></li>
</ul>

jQuery - 我是使用jQuery的新手，我试过这个，但是有很多错误。图片没有正确改变 - “淡入”图片改变位置（每个列表项目绝对定位），并且第一张图像正在消失并且不断出现。这是代码：

function change(i)
{
    switch(i)
    {
        case 1:
            $("#button01_1").fadeOut(500); 
            $("#button01_2").fadeIn(500); 
            break;
        case 2:
            $("#button02_1").fadeOut(500);
            $("#button02_2").fadeIn(500);
    }
}

（ret（i）类似..）

感谢您的帮助..

Answer 1

你快到了，但我可以简化：

<ul id="buttons">
    <li>
        <a href="#" id="link1">
            <img src="button01.png" id="button01_1" />
        </a>
    </li>
    <li>
        <a href="#" id="link2">
            <img src="button02.png" id="button02_1" />
        </a>
    </li>
</ul>

jQuery代码：

$('#link1').hover(function(){
    $('#button01_1').fadeOut(500).attr('src','button01_hover.png').fadeIn(500);
},function(){
    $('#button01_1').fadeOut(500).attr('src','button01.png').fadeIn(500);
});

使用选择器，您可以删除id button01_1并将jQuery选择器替换为$('img','#link')以适应。对不起，如果我使用了比javascript更多的jQuery库。

功能说明：

$（'＃link1'）。hover（function（）{ - onoverial function on hover - }，function（）{ - from out of the hover - }）;

编辑：

jQuery库：<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

将库添加到您的html页面

Answer 2

我认为问题在于淡出图像也会触发鼠标输出（因为淡出完成后它会有display:none），这反过来会触发淡入淡出，等等。考虑重新思考你的逻辑。

Answer 3

<强>更新
像这样使用：

<ul id="buttons">    
    <li><a href="#" onmouseover="change($(this),1)" onmouseout="ret($(this),1)">  
        <img src="button01.png"/> 
    </a></li>
    <li><a href="#" onmouseover="change($(this),2)" onmouseout="ret($(this),2)">  
        <img src="button02.png"/> 
     </a></li>
</ul>

jquery：

function change(elem ,i){
   $(elem).find('img').fadeOut('500',function(){
      $(this).attr('src','button0'+i+'_hover.png').fadeIn('2000');
   });
}
function ret(elem ,i){
   $(elem).find('img').fadeOut('500',function(){
       $(this).attr('src','button0'+i+'.png').fadeIn('2000');
   });
}

我希望工作......

项目随淡入/淡出而变化（jQuery）

3 个答案: