jquery - 淡入淡出图像不会超过淡出图像

Question

我有 6 张图片，悬停时每张图片都会被另一张图片替换(使用 jQuery)并出现在初始图片上。

问题是当图像淡出时，它会在原始图像下方而不是在原始图像上方。

由于淡入/淡出效果很好，我认为这个问题属于我的 css 代码:

CSS:

#puzz {
    border-color:#000000;
    background-color:#00CC33;
    position:fixed;
    left:20%;
    top:13%;
    width:900px;
    height:650px;
}
li {
    list-style:none;
    float:left;
    list-style:none;
    padding:8px;
    margin:10px;
    line-height:10px;
    width:218px;
    height:218px;
    overflow:hidden;
    background:#99CCFF;
    /*For IE9 compatibility*/
    behavior: url(border-radius.htc);
    border-radius: 8px;
}
.fade div {
    position:absolute;
    top:auto;
    left:auto;
    display: none;
}

HTML:

<div id="puzz">
    <ul>
        <li>
            <div class="fade"><img src="img7.jpg" />
                <div><img src="img8.jpg" /></div>
            </div>
        </li>
        <li>
            <div class="fade"><img src="img2.jpg" />
                <div><img src="img5.jpg" /></div>
            </div>
        </li>
        <li>
            <div class="fade"><img src="img3.jpg" />
                <div><img src="img4.jpg" /></div>
            </div>
        </li>
        <li>
            <div class="fade"><img src="img4.jpg" />
                <div><img src="img3.jpg" /></div>
            </div>
        </li>
        <li>
            <div class="fade"><img src="img5.jpg" />
                <div><img src="img2.jpg" /></div>
            </div>
        </li>
        <li>
            <div class="fade"><img src="img6.jpg" />
                <div><img src="img1.jpg" /></div>
            </div>
        </li>
    </ul>
</div>

这是我得到的:

编辑:

这是我使用的 jQuery 脚本:

$(document).ready(function () {
    // find the div.fade elements and hook the hover event
    $('div.fade').hover(function () {
        // on hovering over, find the element we want to fade *up*
        var fade = $('> div', this);    

        // if the element is currently being animated (to a fadeOut)...
        if (fade.is(':animated')) {
            // ...take it's current opacity back up to 1
            fade.stop().fadeTo(250, 1);
        } else {
            // fade in quickly
            fade.fadeIn(250);
        }
    }, function () {
        // on hovering out, fade the element out
        var fade = $('> div', this);
        if (fade.is(':animated')) {
            fade.stop().fadeTo(3000, 0);
        } else {
            // fade away slowly
            fade.fadeOut(30);
        }
    });
});

Answer 1

Here's your code (jsFiddle) ，您的问题已解决。

我只是在 CSS 中做了一些更改，将一个图像放在另一个图像的“上方”。