ползунок, строка запускается до setTimeout и после наведения курсора на один раз, пока все слайды не будут завершены - PullRequest
Новая
       38

ползунок, строка запускается до setTimeout и после наведения курсора на один раз, пока все слайды не будут завершены

1 голос
/ 02 ноября 2011

Привет, у меня есть этот HTML 

<div class="slideListHolder clearfix">
                        <div class="cntBoxes">
                            <div class="mainBox" id="list-1">
                                <img src="img/m1.jpg"width="200" height="400" alt="" />
                                <a class="link" target="_blank" href="http://test.euwebstudio.jp/ntt/careerup/premium/index2.html">詳細はこちら</a>

                            </div>
                            <div class="box id-1">
                                <img src="img/img1.jpg"width="200" height="400" alt=""/>
                            </div>
                            <div class="box id-2">
                                <img src="img/img6.jpg"width="200" height="400" alt=""/>
                            </div>
                            <div class="box id-3">
                                <img src="img/img11.jpg"width="200" height="400" alt=""/>

                            </div>
                            <div class="box id-4">
                                <img src="img/img16.jpg"width="200" height="400" alt=""/>
                            </div>
                            <div class="box id-5">
                                <img src="img/img21.jpg"width="200" height="400" alt=""/>
                            </div>
                        </div>
                        <div class="cntBoxes">

                            <div class="mainBox" id="list-2">
                                <img src="img/m2.jpg"width="200" height="400" alt=""/>
                            </div>
                            <div class="box id-1">
                                <img src="img/img2.jpg"width="200" height="400" alt=""/>
                            </div>
                            <div class="box id-2">
                                <img src="img/img7.jpg"width="200" height="400" alt=""/>
                            </div>

                            <div class="box id-3">
                                <img src="img/img12.jpg"width="200" height="400" alt=""/>
                            </div>
                            <div class="box id-4">
                                <img src="img/img17.jpg"width="200" height="400" alt=""/>
                            </div>
                            <div class="box id-5">
                                <img src="img/img22.jpg"width="200" height="400" alt=""/>
                            </div>

                        </div>
                    </div>

И этот JS 

var cntBoxes='.slideListHolder .cntBoxes';
var time = 300;

$(cntBoxes).mouseover(function() {
    if(!$(this).parent('div').hasClass('dc') && !$(this).parent('div').hasClass('over')){
    $(cntBoxes).parent('div').addClass('over');

        var elem = $(this);
        pieces=elem.children('.mainBox').attr('id').split('list-');

        if (typeof pieces[1] !== "undefined") {
                $(cntBoxes).children('.mainBox').each(function(){
                    var $this=$(this)
                    setTimeout( function(){
                        $this.fadeOut('fast',function(){
                            var showId='.id-'+pieces[1];
                            $this.parent('div').children(showId).fadeIn('fast');
                        });
                    },time)
                    time += 300;
                });
                $(cntBoxes).parent('div').addClass('dc');
                $(cntBoxes).parent('div').removeClass('over');
        }

    }




})

$(cntBoxes).click(function() {
    if($(this).parent('div').hasClass('dc')){

        $(cntBoxes).children('.box:visible').each(function(){
            $(this).fadeOut('slow',function(){
                $(this).parent('div').children('.mainBox').fadeIn('slow');
            });

        });
        $(cntBoxes).parent('div').removeClass('dc');
    }
});

, как это сделать, эта строка $(cntBoxes).parent('div').removeClass('over');, после setTimeout( function(){, и как это возможно, наведите курсор мышипока все слайды не будут закончены, этот скрипт выполняется несколько раз.СПАСИБО МНОГО, Извините, если Объяснение не так понятно

1 Ответ

0 голосов
/ 15 марта 2012

Вы бы уже решили этот вопрос.не имеет значения для меня, может быть, друг друга видят это и используют.Во-первых, в java-скрипте функции таймера асинхронны, как функции ajax.Они запускаются на разных шагах. Это означает, что ваш код будет продолжен сразу после вашей функции setTimeout, не дожидаясь ее завершения / возврата.

Есть несколько способов сделать это с использованием очередей, TimeoutChain ...

вы должны посмотреть здесь Я знаю, что это не очень хороший ответ, но я думаю, что он может датьхорошие подсказки о проблеме.

...