Я пишу простой случай карусели, но у него проблема с анимацией.

Когда вы быстро нажимаете кнопку «Назад» или «Далее», элементы списка также отображаются быстро.

Как это исправить?

код здесь:

Html:

<div id="carousel" class="carousel">
    <div class="pagination">
        <a href="#" class="prev">prev</a>
        <a href="#" class="next">next</a>
    </div>
    <div class="play">
        <!-- initialize play number -->
    </div>
    <div class="pic">
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
        </ul>
    </div>
</div>

Код javascript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script type="text/javascript">
    $(function(){
        var containner=$('#carousel');
        var pagination=containner.find('.pagination');
        var play=containner.find('.play');
        var picList=containner.find('.pic ul li');
        var prev=pagination.find('.prev');
        var next=pagination.find('.next');
        var pageNum=0;
        var defaultAnimateDelay={
            show:800,
            hide:100
        };
        // initialize play number
        (function(picListLength){
            var playHtml='';
            for(var i=0; i<picListLength; i++){
                playHtml+='<a href="#" data-number="'+i+'">'+(i+1)+'</a>';
            }
            play.html(playHtml);
        })(picList.length);
        // 
        function Carousel(pageNumber){
            picList.eq(pageNumber)
            .stop(false,false)
            .animate({
                opacity:'show'
            },defaultAnimateDelay.show).siblings()
            .stop(false,false).animate({
                opacity:'hide'
            },defaultAnimateDelay.hide);
            // add Current class to current play number
            play.find('a')
            .eq(pageNumber)
            .addClass('current')
            .siblings('').removeClass('current');
        }
        // click prev event
        prev.on('click',function(e){
            e.preventDefault();
            if(pageNum===0){
                pageNum=(picList.length-1);
            }else {
                pageNum--;
            }
            Carousel(pageNum);
        });
        // click next event
        next.on('click',function(e){
            e.preventDefault();
            if(pageNum===(picList.length-1)){
                pageNum=0;
            }else{
                pageNum++;
            }
            Carousel(pageNum);
        });
        //  play number 
        play.on('click','a',function(e){
            e.preventDefault();
            pageNum=Number($(this).attr('data-number'));
            Carousel(pageNum);
        });

    });
</script>

Bootstrap carousel js работает хорошо, но не использует функцию остановки jquery.

-5
xmlovecss 8 Июл 2013 в 13:06
4
Я не вижу ничего, что нужно исправить. Вам нужно будет показать нам свой код.
 – 
Bergi
8 Июл 2013 в 13:19
Пожалуйста, опубликуйте код, иначе мы не сможем вам помочь
 – 
Mangiucugna
8 Июл 2013 в 13:24
^^ ребята, откройте глаза. щелкните ссылку, и вы увидите код. Нет причин для отрицательного голоса!
 – 
user887983
8 Июл 2013 в 13:26
1
@RobertP. Так работает SO. Это означало бы, что мы здесь, чтобы лично решить проблему с OP, не используя ее для других.
 – 
PeeHaa
8 Июл 2013 в 13:46
4
Этот вопрос кажется не по теме, потому что OP отказывается публиковать свой код, а это означает, что после того, как ссылка отключится, останется дерьмовый вопрос.
 – 
PeeHaa
8 Июл 2013 в 14:41

1 ответ

Лучший ответ

Исходя из вашего кода, все происходит немедленно. Нет обратных вызовов и, следовательно, не нужно ждать окончания анимации. Ваш код можно реорганизовать, чтобы сделать его более читабельным и более легким для рефакторинга. Вот что я бы попробовал:

function show(pageNumber){
    return picList.eq(pageNumber)
    .animate({
        opacity:'show'
    },defaultAnimateDelay.show).promise();
}

function hide(pageNumber){
    return picList.eq(pageNumber)
    .stop(false,true)
    .siblings()
    .stop(false,false)
    .animate({
        opacity:'hide'
    },defaultAnimateDelay.hide).promise();
}

function Carousel(pageNumber){
    var promise = hide(pageNumber);
    promise.done(function(){
        show(pageNumber);
    });

    play.find('a')
    .eq(pageNumber)
    .addClass('current')
    .siblings('').removeClass('current');
}

Это гарантирует, что анимация скрытия завершится до начала анимации показа. Другой вариант - использовать встроенные обратные вызовы, но мне легче следовать. Я не уверен, что все операторы stop необходимы, но оставил их.

Другая проблема (которая влияет на начальное состояние страницы) заключается в том, что изначально ничего не скрыто. Чтобы решить эту проблему, просто обновите код инициализации следующим образом:

(function(picListLength){
    var playHtml='';
    for(var i=0; i<picListLength; i++){
        playHtml+='<a href="#" data-number="'+i+'">'+(i+1)+'</a>';
    }
    play.html(playHtml);
    hide(0); // hide all but one
})(picList.length);

JSFiddle: http://jsfiddle.net/infiniteloops/CUYbL/

Обещание JQuery: http://api.jquery.com/promise/

0
Gary.S 31 Окт 2013 в 08:28