动态更改jquery中的图像以匹配css图像

希望我能正确地解释这个问题，如果没有，请让我知道，我会进行编辑

我创建了一个幻灯片菜单，当它显示时，背景是模糊的，当它是一个静态图像时，它工作正常，我遇到的问题是当它是一个幻灯片

这会让你更好地理解我在做什么

如果单击红色按钮，幻灯片的背景看起来会模糊，但是如果单击下一个或上一个按钮并显示不同的幻灯片，模糊图像将保持不变，我需要它与幻灯片图像匹配

下面是我的jquery代码

jQuery(document).ready(function($) {
  $(".trigger-wrapper").click(function () {
    $("#menu-wrapper-left").stop().animate({width: 'toggle'});
    $('#hero-container').css('background-image','url(http://dummyimage.com/600x400/000/fff.jpg)');
    return false;
  });
});

重要的是

$('#hero-container').css('background-image','url(http://dummyimage.com/600x400/000/fff.jpg)');

这是幻灯片菜单用于模糊的图像，如果删除这一行，幻灯片菜单将在样式表中使用以下css图像

#hero-container {
  background: url(http://2.bp.blogspot.com/-LwilPQw9Zc0/Unzm09oXDxI/AAAAAAAAHwo/30a7ZqSp3jE/s1600/blur-static+.jpg) no-repeat 50% fixed;
  background-size: cover;
}

无论哪种方式都是错误的，因为它是单一的，它需要根据所选幻灯片使用幻灯片图像，见下文

.hero li:nth-child(1) span { 
  background-image: url('http://dummyimage.com/600x400/000/fff.jpg');
}
.hero li:nth-child(2) span {
  background-image: url('http://2.bp.blogspot.com/-LwilPQw9Zc0/Unzm09oXDxI/AAAAAAAAHwo/30a7ZqSp3jE/s1600/blur-static+.jpg');
}

---

谁能帮我举一个有效的例子。

我理解你的问题。我使用了来自JSFIDLE链接的相同html、javascript和css文件，并对其进行了一些修改。我在做修改的地方添加了css，也在修改的地方添加了JSFIDLE链接

CSS

完成的演示在给定的JSFIDLE链接中

---

无论何时在滑块中切换图像，都必须更改菜单中的背景图像，但在滑动到下一个图像时，还必须对其设置动画，并使其速度完全相同。我在想也许换成帆布幻灯片会更容易。我刚刚看了一下小提琴，图像不再模糊了？谢谢，我迫不及待地想看它，一旦看了，我就接受并投票支持答案。@user1221565我已经添加了正确的代码，下面是小提琴链接。不透明度和背景对你有帮助吗：白色是你需要的东西我很乐意接受这个答案，但我不确定你是否理解这个问题，当白色幻灯片出来时，背景区域应该在白色部分下方模糊，如果你看原始小提琴，你可以看到图像模糊，当你滑到下一张图像时，图像仍然模糊，但我是错误的图像，我希望该图像替换为幻灯片上的图像？@user1221565你以不同的方式实现了。如果我能改变实现的方式，那么我就能带来所需的输出。你怎么说。

#menu-wrapper-left {
    height:100%;
    width:300px;
    position: fixed;
    display: none;
    background:white;
    top:0;
    opacity:0.5;
    z-index:5;
    box-shadow: 1px 1px 4px rgba(0,0,0,.3);
    left:0px;
}