javascript - 使用具有淡入和淡出效果的 jQuery 更改悬停列表的背景主体图像 + 缩放

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 学习我的方式)。

而且，我想要的是，当用户将鼠标悬停在列表项上时，正文图像会使用列表项中该跨度的图像 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)
    });
});

这不完全是答案，只是一个示例，必须根据您的需要进行调整。