改变背景体图像悬停列表与jQuery与fadeIn和fadeOut效果+缩放

Question

长标题，我知道。这很好地解释了我想要完成的任务。

我的HTML是这样的:

<ul>
<li class="bg-0">
    <h2><a href="http://localhost/sublime/project/new-bikes/">New Bikes</a></h2>
    <span class="bg-0">http://localhost/sublime/wp-content/uploads/2016/10/new.jpg</span>
</li>
<li class="bg-1">
  <h2><a href="http://localhost/sublimes/project/smart-control/">Smart Control</a></h2>
  <span class="bg-1">http://localhost/sublime/wp-content/uploads/2016/10/smart.png</span>
</li>
<li class="bg-2">
  <h2><a href="http://localhost/sublime/project/laura/">Laura</a></h2>
  <span class="bg-2">http://localhost/sublime/wp-content/uploads/2016/10/laura.jpg</span>
</li>
</ul>

这不是最整洁的，但我是用Wordpress生成的，我不知道有什么更好的(还在通过PHP学习)。

并且，我想要的是，当用户将鼠标悬停在列表项上时，body image会使用该列表项中该span的image url进行更改。当鼠标移出时，它会恢复到原来的颜色。我可以使用下面的代码(再次强调，我确信它非常丑陋和肮脏):

$('.our-work li').hover(
function(e){
//mouseenter
var theClass = $(this).attr('class');
    var theImage = $(this).find('span').text();
    $('body.page-template-ourwork-page').css({'backgroundImage' : 'url(' + theImage + ')'});
    console.log($('body').css('background'));
},
function(e){
 //mouseleave
 var theClass = $(this).attr('class');
var theImage = $(this).find('span').text();
$('body.page-template-ourwork-page').css({'backgroundImage' : 'url()'});
}
);

但我似乎无法完成的是一个"软"的变化与淡入和淡出效果。更重要的是，我希望当鼠标停留在列表项上时，背景图像会慢慢放大(变"大")，直到某一点，然后停止。

我已经尝试了fadeIn和fadeOut函数，但它们现在似乎工作正常，所以我确信这是我做错了。

Answer 1

需要为CSS添加索引，并将较高的数字放在需要保持在另一层之上的图层上。

<ul class="slide"></ul>

css

.slide{
    z-index: -1;/*Use it according to your needs.*/
}

的Jquery需要缩放:

$('img').load(function() {
    $(this).data('height', this.height);
}).bind('mouseenter mouseleave', function(e) {
    $(this).stop().animate({
        height: $(this).data('height') * (e.type === 'mouseenter' ? 1.5 : 1)
    });
});

这不是确切的答案，只是一个例子将不得不适应您的需求。