在 div 之间滑动重复的背景图像答案

【问题标题】：Slide repeated background-image between divs在 div 之间滑动重复的背景图像
【发布时间】：2012-01-02 03:33:35
【问题描述】：

如何使用 jQuery 创建在 div 之间滑动重复背景图像的效果？

看看我做的这个简单的fiddle。我正在使用addClass / removeClass jQuery 函数与 CSS 组合来更改哪个 div 具有背景图像。一切正常。

但是如果我想为每个 div 之间的背景图像的滑动设置动画呢？

【问题讨论】：

使用 background-position 属性。
@clyfe background-position 在这里没有帮助，因为它是重复的背景图像

标签： jquery css animation background-image

【解决方案1】：

您可以在文本后面制作一个背景 div：

JS--

var $menu = $('#menu'),
    $bg   = $menu.children('.bg');
$menu.children().not($bg).click(function() {
    var $this = $(this);
    $menu.children('.active').removeClass('active');
    $this.addClass('active');
    $bg.css('opacity', 0.5).stop().animate({
        left : $this.offset().left
    }, 500, function() {
        $(this).stop().animate({ opacity : 1 }, 250);
    });
});

HTML--

<div id="menu">
    <div class="active">
        Item 1
    </div>
    <div>
        Item 2
    </div>
    <div>
        Item 3
    </div>
    <div class="bg"></div>
</div>

CSS-

#menu {
    position : relative;
    z-index  : 1;
}

#menu > div {
    z-index     : 2;
    display     : inline-block;
    height      : 50px;
    width       : 150px;
    text-align  : center;
    line-height : 2;
}

#menu .bg {
    position   : absolute;
    z-index    : -1;
    top        : 0;
    left       : 0;
    background : transparent url('http://alexcoplan.co.uk/resources/active.png');
}

这是一个演示：http://jsfiddle.net/Hwvsb/3/

【讨论】：

@AlexCoplan 我刚刚将 JavaScript 代码更改为缓存选择器（这应该运行得更快），它还更改了背景元素的不透明度以获得简洁的效果：jsfiddle.net/Hwvsb/3
太棒了！ - 此代码将在几天后生效，我将在此处复制链接：)