Скрытие блока во время анимации

@OgStyle · Регистрация: 18.11.2012

Author24 — интернет-сервис помощи студентам

Ребята, помогите советом. Вот что есть на даный момент:

http://infood.com.ua/lviv/uk/8-ostriv-sushi-yapi

Нажмите на кнопку "Меню" и вы увидите как произойдет анимация, прокручивая блок влево. мне нужно что бы во время выполнения этой анимации блок не вылазил за пределы сайта а как бы скрывался как спойлер, что бы создать еффект перелистывания. Как это можно сделать подскажите? Вот код на даный момент:

Javascript

    $('#button-top').toggle(function() {
              $('#innerTop').animate({'left':'-703px'},1200); 
            }, function() {
             $('#innerTop').animate({'left':'0px'});
            });

@EPMAK · 09.02.2014, 09:29

Сообщение от OgStyle

еффект перелистывания

Javascript

$(function(){
var innerTopWidth = $('#innerTop').width();
var innerTopHeight = $('#innerTop').height();
$('#innerTop').wrap('<div class="saloWell"></div>');//обертка для страничный эффект
$('.saloWell').css({
    overflow: 'hidden',
    height: innerTopHeight
});/*вынести в CSS*/
 
$('#button-top').toggle(function() {
              $('.saloWell').animate({width:0},1200);             
            }, function() {
              $('.saloWell').animate({width: innerTopWidth}); 
});
});

Не по теме:

Советую сократить колличество стилей CSS в десятки раз.

@Lazy_Den · 09.02.2014, 17:15

Как вариант - использовать готовые решения, а не изобретать велосипед. К примеру, есть плагин turn.js. Допилить под свою задачу и получим что-то в этом роде. В примере я использовал базовую и минимальную настройку. Нужно, чтоб перелистывалось по нажатию на пункт меню, а не только на саму страницу? Значит добавляем триггер. В общем, там всё зависит от ваших фантазий.

код

Javascript

$('#flipbook').turn({autoCenter: true});
$("#flipbook").bind("last", function(event) {
    alert("Это последняя страница");
});

HTML5

<div id='flipbook'>
    <div class="hard"> Start Page </div>
    <div class="hard"></div>
    <div> Page 1 </div>
    <div> Page 2 </div>
    <div> Page 3 </div>
    <div> Page 4 </div>
    <div> Page 5 </div>
    <div class="hard"></div>
</div>

CSS

#flipbook{
    width:600px;
    height:400px;
}
#flipbook .turn-page{
    width:300px;
    height:400px;
    background-color:#dcdcdc;
}
#flipbook .hard{
    background:#ccc !important;
    color:#333;
    -webkit-box-shadow:inset 0 0 5px #666;
    -moz-box-shadow:inset 0 0 5px #666;
    -o-box-shadow:inset 0 0 5px #666;
    -ms-box-shadow:inset 0 0 5px #666;
    box-shadow:inset 0 0 5px #666;
    font-weight:bold;
}
#flipbook .odd{
    background:-webkit-gradient(linear, right top, left top, color-stop(0.95, #FFF), color-stop(1, #DADADA));
    background-image:-webkit-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
    background-image:-moz-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
    background-image:-ms-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
    background-image:-o-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
    background-image:linear-gradient(right, #FFF 95%, #C4C4C4 100%);
    -webkit-box-shadow:inset 0 0 5px #666;
    -moz-box-shadow:inset 0 0 5px #666;
    -o-box-shadow:inset 0 0 5px #666;
    -ms-box-shadow:inset 0 0 5px #666;
    box-shadow:inset 0 0 5px #666;
}

Добавлено через 8 минут
P.S. Кстати, там есть много методов, настроек и т.д. К примеру, по клику на кнопку, мы легко перелистаем страницу без лишних своих кодов.

Комментарий модератора

Код должен присутствовать в тексте сообщения. Песочницы — это лишь бонус для демонстрации.

@vovandr · 09.02.2014, 17:27

Кстати вот как раз использовал turn.js в социальном проекте конституции http://constitution.sokolniki.... index.html

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	09.02.2014, 17:27	4
	Кстати вот как раз использовал turn.js в социальном проекте конституции http://constitution.sokolniki.... index.html 0