цикл через набор элементов и анимировать

Question

цикл через набор элементов и анимировать

0

У меня есть набор элементов, где, когда я нажимаю на определенную кнопку, я хочу анимировать один элемент за раз, используя jquery.

Это моя html-разметка.

<ul class="image-wrapper">
                <li class="image">
                    <img src="images/slider-image-1.jpg">
                </li>
                <li class="image">
                    <img src="images/slider-image-1.jpg">
                </li>
                <li class="image">
                    <img src="images/slider-image-1.jpg">
                </li>
            </ul>

            <div class="left-arrow"></div>
            <div class="right-arrow"></div>
            <div class="overlay"></div>
            <div class="menu"></div>

Это мой код jquery для анимации каждого элемента.

$('.left-arrow').click(function(){
        $('.image').first().animate({
            width:'0px'
        },1000);
    })

Но проблема в том, что после первой анимации я не могу продолжить с остальными! как я могу прокручивать элементы для скольжения в каждом элементе.

Imesh Chandrasiri 23 сен. 2013, в 06:54

Источник

Теги:

javascript

jquery

html

css

animation

2 ответа

0

Попробуйте jquery .each(),

$('.left-arrow').click(function(){
        $('.image').each(function(){
          $(this).animate({
            width:'0px'
        },1000);
    })

Optimus Prime 23 сен. 2013, в 02:46

0

каждый не работает
Imesh Chandrasiri 23 сен. 2013, в 04:29

Ещё вопросы

Arun P Johny · Accepted Answer · 2013-09-23T02-48-00.000Z

вам нужно держать и индексировать

var index = 0, $imgs = $('.image');
$('.left-arrow').click(function(){
    $imgs.eq(index ).animate({
        width:'0px'
    },1000);
    index = index == 0 ? $imgs.length - 1  : index - 1 ;
})

Демо: скрипка