0

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

HTML 代码：

<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）是相似的..）

感谢帮助..

4

3 回答 3

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')以适应。对不起，如果我使用了太多的 jQuery 库而不是 javascript。

功能说明：

$('#link1').hover(function(){ -- 悬停时的初始函数-- },function(){ -- 从悬停中出来-- });

编辑 ：

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

将库添加到您的 html 页面

于 2012-11-24T21:29:24.770 回答
0

我认为问题在于淡出图像也会触发鼠标移出（因为display:none一旦淡出完成它就会触发），这反过来又会触发淡入，依此类推。考虑重新思考你的逻辑。

于 2012-11-24T21:23:38.010 回答
0

更新：
像这样使用： 

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

我希望工作...

于 2012-11-24T21:26:51.850 回答