固定元素变换时的背景颜色

Question

不确定这是否可能实现，我有一个图像列表，我使用GSAP库移动这些图像，每个列表项都有一个背景色，当项目移动时需要保留或保留，也就是说，背景色必须保留，只有列表项必须移动

代码笔：https://codepen.io/nagshankar/pen/ExwOgOa

<div>   
<ul id="freds">
<li class="ibu">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32887/fred.svg"/>
</li>
<li class="us">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32887/fred-pink.svg"/>
</li>
</ul>
<button onclick="ibu()">IBU</button>
<button onclick="us()">US</button>
</div>

CSS：

#freds{position:absolute;bottom:50px}
#freds li{display:inline-block;list-style:none;background:#999999;}

Answer 1

如果你只想移动image，你只需要瞄准图像，而不是li:

function ibu(){
gsap.to('#freds li img', {y:0})
gsap.to('#freds li.ibu img', {y:-300})
}
function us(){
gsap.to('#freds li img', {y:0})
gsap.to('#freds li.us img', {y:-300})
}

工作示例：

function ibu() {
gsap.to('#freds li img', {
y: 0
})
gsap.to('#freds li.ibu img', {
y: -300
})
}
function us() {
gsap.to('#freds li img', {
y: 0
})
gsap.to('#freds li.us img', {
y: -300
})
}

#freds {
position: absolute;
bottom: 50px;
left: 100px
}
#freds li {
display: inline-block;
list-style: none;
background: #999999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<ul id="freds">
<li class="ibu">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32887/fred.svg" />
</li>
<li class="us">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32887/fred-pink.svg" />
</li>
</ul>
<button onclick="ibu()">IBU</button>
<button onclick="us()">US</button>