你好，给你写了一个很基础的例子。参照着自己优化成你想要的效果吧。
示例是这样的，鼠标移动到div上，背景图片会从左往右移动直至最右端。鼠标移出div，背景图标从右往左直至最左端。
备注：考虑到宽度变化，本例背景图片使用百分比定位。根据你的实际情况也可改为使用像素(px)定位。
<style>.bg-div {
height: 110px
background: url(https://gss0.bdstatic.com/7Ls0a8Sm1A5BphGlnYG/sys/portrait/item/27267a776a746b7505.jpg) 0% center no-repeat #ccc
}
</style>
<div id="J_BgDiv" class="bg-div"></div>
<script>
(function() {
var div = document.getElementById('J_BgDiv')
// 背景百分比（从左至右，0%-100%）
var pos = 0
// 背景向右移还是向左移（0：向右，1：向左）
var dir = 0
// 每次移动的百分比，控制速度
var step = 3
div.addEventListener('mouseover', function() {
var node = div
dir = 0
if (!div.mover) {
div.mover = setInterval(function() {
// 每次移动10%
if (dir === 0) {
pos += step
} else {
pos -= step
}
pos = pos >= 100 ? 100 : pos
pos = pos <= 0 ? 0 : pos
node.style.backgroundPosition = pos + '% center'
}, 20)
}
}, false)
div.addEventListener('mouseout', function() {
dir = 1
}, false)
})()
</script>
希望能帮你解决问题，如有疑问可以追问。
setTImeout第一个参数必须是一个可执行的函数，你第二副图传的是一个表达式，是没有返回值的。可以有如下写法：
1、你的第一种写法
2、setTimeout(handle, 1000)
function handle() {location.href=xxx}
3、setTimeout(()=>location.href=xxx)
