整合超级化

Question

我运行了这两个脚本。一个是超大的脚本。另一个脚本用于淡化其他图像。脚本的目的是根据列表项上的鼠标悬停行为淡化背景图像。背景图像必须全屏并保持纵横比。问题是淡入的图像不受超大尺寸脚本的影响。

<script type="text/javascript">     
        jQuery(function($){         
            $.supersized({
                slides  :   [{image : '01.jpg', title : '01'},
                             {image : '02.jpg', title : '02'},
                             {image : '03.jpg', title : '03'},
                             {image : '04.jpg', title : '04'},]
            });
        });     
    </script>

    <script>
$(document).ready(function()
 {
function fadeImage (img) {
    $("#div").stop(true).animate ({ opacity: 0 }, 'slow', function () {
        $(this).css ('background-image', img).animate ({ opacity: 1 }, 'slow');
    });
}
var colorOrig="url(01.jpg)";
$("#first").hover(
function() {
fadeImage ('url(02.jpg)');
}, function() {
fadeImage (colorOrig);
});
$("#second").hover(
function() {
fadeImage ('url(03.jpg)');

}, function() {
fadeImage (colorOrig);
});
$("#third").hover(
function() {
fadeImage ('url(04.jpg)');
}, function() {
fadeImage (colorOrig);
});
});