Слайд повторять фоновое изображение между div - PullRequest
2 голосов
/ 01 января 2012

Как вы можете использовать jQuery для создания эффекта скольжения повторяющегося фонового изображения между элементами?

Взгляните на эту простую скрипку , которую я сделал. Я использую функции addClass / removeClass jQuery в сочетании с CSS, чтобы изменить, какой div имеет background-image. Это все отлично работает.

Но что, если я хочу анимировать скольжение фонового изображения между каждым div?

1 Ответ

1 голос
/ 01 января 2012

Вы можете сделать фоновый 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/

...