0

我的脚本有问题。

我有 ID 为“web_click”的对象和 ID 为“web”的图像。我想当我悬停（或鼠标悬停）图像“web”源中的“web_click”时，将使用淡入淡出效果从“web.png”替换为“web_hover.png”（这些图像具有相同的尺寸）。当然，在“mouseout”或完成悬停源必须用淡入淡出替换为非悬停图像。

但是现在这个脚本在悬停到'web_hover.png'并消失（两个图像都没有显示）并且当我将光标从“web_click”图像移出时返回到'web.png'并具有淡入淡出效果。为什么我悬停时它会隐藏？

$(document).ready(function(){
$("#web_click").hover(function() {
$('#web').fadeOut();
    $("#web").attr ("src","png/two/web_hover.png");
        }, function() {
            $('#web').fadeIn();
    $("#web").attr ("src","png/two/web.png");
});

});

更新：我做了这个方法并且淡入淡出工作但是图像之间的延迟。第一个图像淡出，这里有一点停顿，两个图像都没有显示，第二个图像淡入。我怎样才能做到这一点没有这些之间的中断？

<script>
$(document).ready(function(){
    $("#web_click").mouseover(function() {
        $("#web").fadeOut('100', function(){
            $("#web").attr ("src","png/two/web_hover.png"); 
            $('#web').fadeIn('100');    
    });
    });
$("#web_click").mouseout(function() {
    $("#web").fadeOut('100', function(){
        $("#web").attr ("src","png/two/web.png");
        $('#web').fadeIn('100');
    });
});
});
</script>
4

1 回答 1

0

尝试这个

    <style type="text/css">
        img
        {
            position:absolute;
        }
    </style>
    <div id="web_click">
        <img src="png/two/web_hover.png" alt="Alternate Text" />
        <img style="display:none" src="png/two/web.png" alt="Alternate Text" />
    </div>

    <script type="text/javascript">
        $("#web_click").hover(function () {
            $('#web_click img').fadeToggle()
        }, function () {
            $('#web_click img').fadeToggle()
        });
    </script>

img 的样式用于将两个图像放在同一个位置

于 2012-07-16T08:49:01.517 回答