Question

我的剧本有问题。

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

但是现在这个脚本将fadeIn悬停到'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>

Answer 1

试试这个

    <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的样式用于将两个图像放在同一个地方

jQuery淡入淡出时替换两个图像

1 个答案: