Увядание фоновых изображений без 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"); 
    }); 
});