if (: visible) slide up with a delay

Я пытаюсь сдвинуть страницу вниз, а затем перейти на другую страницу. Но по какой-то причине я не могу понять это.if (: visible) slide up with a delay

http://maximsiebert.com/unamed/Untitled-1.html

Если вы посмотрите здесь, вы можете видеть, что если я нажимаю About навигации по ссылке, страница скользит вверх, если я снова нажмите скользит вниз. То же самое для Contact page.

Проблема заключается в том, в то время как, у меня есть About page и я нажимаю на ссылку контакта, мне нужно About page скользить вниз, в то время как Contact page скользит вверх, наоборот. Но я не могу заставить его работать.

Вот мой код: пс: в "divPages" У меня есть #aboutpage и #contactpage

$(document).ready(function() { 
$('.about').click(function() { 
    if (!$('#aboutpage').is(":visible")) { 
    $('#portfolio').slideUp(1000); 
     $('#aboutpage').slideDown(1000); 
    }else{ 
     $('#portfolio').slideDown(1000); 
     $('#aboutpage').slideUp(1000); 
    } 

});

});

$(document).ready(function() { 
$('.contact').click(function() { 
    if (!$('#contactpage').is(":visible")) { 
     $('#portfolio').slideUp(1000); 
     $('#contactpage').slideDown(1000); 
    }else{ 
     $('#portfolio').slideDown(1000); 
     $('#contactpage').slideUp(1000); 
    } 

});

});

$(document).ready(function() { 
$('.welcome').click(function() { 
    if ($(divPages).is(":visible")) { 
     $('#portfolio').slideDown(1000); 
     $(divPages).slideUp(1000); 
     }else{ 
     $('html, body').animate({scrollTop:0}, 'slow'); 
    } 

});

});

источник

2012-10-20 Maxim Siebert

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

последнего редактирования Добавить класс .menu-item и атрибуты данных data-content-div равного идентификатор Контента Див на ваше меню Ли.

<li class="about menu-item" data-content-div="contactpage">about</li>

И попробуйте этот код в замене того, что у вас есть:

$(document).ready(function() { 
    $('.menu-item').click(function() { 
     if ($(this).hasClass('menu-active')) 
     { 
      var contentDiv = $(this).data('content-div'); 
      $('.menu-active').removeClass('menu-active'); 
      $('#' + contentDiv).slideDown(1000); 
     } 
     else if ($('.menu-active').length) 
     {  
      var menuItem = $(this); 
      var hideDiv = $('.menu-active').data('content-div'); 
      $('.menu-active').removeClass('menu-active'); 
      $('#' + hideDiv).slideDown(500, function() { 
       menuItem.addClass('menu-active'); 
       $('#' + menuItem.data('content-div')).slideUp(1000); 
      }); 
     } 
     else 
     { 
      $(this).addClass('menu-active'); 
      $('#' + $(this).data('content-div')).slideUp(1000); 
     } 

    }); 
});

Вот fiddle, где он будет работать, если у меня были все свои стили.

источник

2012-10-20 01:55:29 kmfk

'hasClass' /' addClass' принимает имена классов без точек. – Blender

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

@Blender - да, заметил, я это сделал, когда отредактировал его – kmfk

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

после любого слайда() добавить .css ({'z-index': '- 1'}); как и после ans slideUp() добавить .css ({'z-index': '100'});

$('#about').slideDown(1000).css({'z-index':'-1'}); 
$('#contact').slideDown(1000).css({'z-index':'100'});

Я столкнулся с той же проблемой с EI на слайд-шоу с попеременным угасанием. Другой pic оставался над другим, поэтому вы не могли работать.

Надеюсь, это поможет.

РЕДАКТИРОВАТЬ: аффер, взяв другой взгляд, о том, чтобы оставаться скрытым в соответствии с моим firebug. Затем вы также можете проверить, видимо ли это или нет, и при необходимости изменить отображение.

Этого можно достичь с помощью.есть («: видимый») как так:

if($('#about').is(':visible') == false) $('#about').show();

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

источник

2012-10-20 03:50:29

ответ

Смежные вопросы