jQuery за сайт с една страница, който се превърта автоматично след натискане на бутон за възпроизвеждане

Маркирах прост сайт от една страница, който има абсолютно позиционирана навигационна лента в горната част на страницата за превъртане до секции на страницата с помощта на котви. Можете да видите моя ужасен код на живо тук:

http://codepen.io/anon/pen/nlcsK

Ще забележите също, че има „Пусни“ div в горната част на страницата, тъй като това, което наистина бих искал да направя, е страницата автоматично да превърта до различни котви в различно време след вас натиснете „Пусни“.

За съжаление моят jQuery е дори по-лош от моя HTML/CSS, така че нямам представа как да направя това! Всяка помощ (стъпка по стъпка) ще бъде много ценена!

<nav id="nav">
  <a href="/bg#section-one">One</a>|
  <a href="/bg#section-two">Two</a>|
  <a href="/bg#section-three">Three</a>|
  <a href="/bg#section-four">Four</a>
</nav>

<div id="section-one" class="cover">
  <h1 id="play">Play</h1>
</div>

<div id="section-two" class="cover">
</div>

<div id="section-three" class="cover">
</div>


* {
  margin:0px;
  padding:0px;
  height:100%;
}

#nav {
  position:fixed; 
}

#section-one { 
  background-color:white;
}

#section-two { 
  background-color:orange;
}

#section-three { 
  background-color:grey;
}

#section-four { 
  background-color:green;
}

.cover {
  background: no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
}

#play {
  width:60px;
  height:60px;
  background-color:red;
  margin: 0px auto;
}

html jquery css anchor singlepage
person user3147067    schedule 30.12.2013    source източник
comment
Като общо правило е по-добре да копирате и съответния код във вашия въпрос; това помага на въпроса да остане уместен, дори ако връзката прекъсне на по-късна дата. Благодаря!   -  person StackExchange What The Heck    schedule 30.12.2013
comment
Вижте този въпрос тук: stackoverflow.com/questions/6677035/jquery-scroll -to-element Това, което можете да направите, е да използвате примера, даден там, и да го комбинирате с функцията .delay(), за да измервате времето на вашите превъртания. api.jquery.com/delay   -  person Dryden Long    schedule 30.12.2013
comment
възможен дубликат на Smooth JavaScript/jQuery превъртане до елемент   -  person StackExchange What The Heck    schedule 30.12.2013

Отговори (1)


arrow_upward
0
arrow_downward

Ако добавите този jQuery-код:

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash,
        $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 1000, 'swing', function () {
            window.location.hash = target;
        });
    });
});

Всеки път, когато натиснете HTML anchor връзка, действието ще бъде заменено и jquery ще превърти до него.

По същия начин при правенето на анимация за бутона за възпроизвеждане. Трябва да получите позицията на целите, след което можете да превъртите до нея:

$(document).ready(function() {
    $('.play').on('click', function() {
        $target = $(yourelement);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 1000, 'swing', function () {
            window.location.hash = target;

            //do this for the next one
            $target = $(yourelement);
            $('html, body').stop().animate({
                'scrollTop': $target.offset().top
            }, 1000, 'swing', function () {
                window.location.hash = target;
                //and probably for another one here
            });
        });
    }
});

където 1000 е времето, необходимо за превъртане в милисекунди, можете да промените това.

person vigonotion    schedule 30.12.2013