淡入淡出沒有 HTML 的背景圖像

Question

我正在嘗試使背景圖像淡入淡出。 我無法更改 HTML 代碼。

        <ul id="supersized" class="quality" style="visibility: visible;">
          <li class="slide-0 activeslide">
           <a target="_blank">
           <img src="image1" style="width: 994px; height: 745.5px; left: 0px; top: -39.5px;">
         </a></li></ul>

有一個插件可以讓圖像在每個屏幕上看起來都很漂亮。 所以我只需要使用 Javascript。 我到了這里：

$(document).ready(function() {
    var scroll_pos = 0;
    $(document).scroll(function() {
        var parent = document.getElementById('supersized'); // because img has no ID
        var element = parent.getElementsByTagName('img')[0];
        scroll_pos = $(this).scrollTop();
        if (scroll_pos > 710) {
            $(element).attr("src", 'image1');
        } else {
            $(element).attr("src", 'image2');
        }
    });
});

然后我意識到在這種情況下我無法制作 Fade。 所以我帶着這個：

$(document).ready(function() {
    var scroll_pos = 0;
    $(document).scroll(function() {
        scroll_pos = $(this).scrollTop();
        var parent = document.getElementById('supersized');
        var element = parent.getElementsByTagName('img')[0];
        if (scroll_pos > 710) {
            $(element).attr("src", 'img1').fadeIn();
        } else {
            $(element).attr("src", 'img1').fadeOut();
        };
        if (scroll_pos < 710) {
            $(element).attr("src", 'img2').fadeIn();
        } else {
            $(element).attr("src", 'img2').fadeOut();
        };

    });
});

但這不起作用。 知道怎么做嗎？

Answer 1

**HTML AND CSS**

<style>    
#effect {
  padding: 0.4em;
  background: #555 url("/sites/default/files/fashion-and-jewellery.jpg");
  opacity: 0.5;
   }    

#effect {
  max-width: 490px;
  height: 320px;
  }  
</style>

<div id="effect" class="ui-widget-content ui-corner-all"></div>


**JQUERY**

$(document).ready(function(){
    $("#effect").hover(function() {
        $(this).animate({opacity: '1'}, "slow");
    }, function () {
        $(this).animate({opacity: '0.5'}, "slow");
    });
});