Лучший способ реализовать изменения fadeIn fadeOut Content menu Jquery - PullRequest
Новая
       21

Лучший способ реализовать изменения fadeIn fadeOut Content menu Jquery

2 голосов
/ 06 августа 2011

Ищем лучший способ реализовать меню с помощью javascript (jQuery), где я могу изменить содержимое, щелкнув по меню, используя эффект исчезновения fadeIn, который скрыт в html.

IDEA

У меня есть меню, когда я нажимаю, хочу активировать кнопку и контент, и использовать эффект fadeOut и заменять контент, на который я нажал. (Можно добавить активный класс для лучшей игры с CSS)

ПРОБЛЕМЫ

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

ПОИСК РЕШЕНИЯ

Я ищу лучший способ реализации:

  • Меню, если "href" - лучший способ показать содержимое

  • Решить основную проблему эффекта постепенного исчезновения. Особенно, если вы быстро нажимаете между кнопками, кажется, что он ломается (я немного увеличил время в примере, чтобы проверить его лучше)

  • Добавить класс "активный" в меню и галерею

Небольшой пример для начала здесь

Ответы [ 2 ]

0 голосов
/ 06 августа 2011

Если я правильно понимаю ваш вопрос, вы хотите прекратить задержку, когда одна галерея исчезает, а другая исчезает. Самый простой способ сделать это - скрыть текущую галерею (вместо fadeOut), а затемfadeIn вновь выбранная галерея.Если вы измените свой код JavaScript на этот, вы увидите, что результат намного более плавный. 

  $('#menu li').click(function(event){
      event.preventDefault();
      var $this = $(this);
      var href=  $this.find('a').attr('href');
      $(".gallery").hide();
      $(href).fadeIn(1000);  
  });
0 голосов
/ 06 августа 2011

Вам необходимо использовать свойство обратного вызова fadeIn и fadeOut. При этом вы можете заказать их правильно и заставить их вести себя так, как вы хотите, например: 

$('#button').click(function(){
    $(this).fadeOut('fast', function(){
         $(this).load('yourcontent.php', function(){
              $(this).fadeIn('fast');
              $(this).addClass('active');
         }
    }
}

Если вы используете функцию загрузки для загрузки контента, приведенный выше код должен оказаться полезным. Однако, если вы используете статическое содержимое для кнопки, вы также можете использовать функцию .html для загрузки содержимого в кнопку.

Вы можете вызвать кнопку с помощью селектора jQuery, как я это делал в примере выше, или вы можете использовать атрибут onclick: 

<a onclick="example('one')">Test Button</a>

И тогда javascript будет: 

function example(id){
     $('#' + id).fadeOut('fast', function(){
         $(this).load('yourcontent.php', function(){
             $(this).fadeIn('fast');
             $(this).addClass('active');
         }
     }
}

ОБНОВЛЕНИЕ 3

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

$('#menu li').click(function(){
    $('.gallery').queue("fx", []);
    $('.gallery').stop(true, true);
    var which = $('a', this).attr('href'); 
    $('.gallery.active').fadeOut(2000, function(){
        $(this).removeClass('active');
        if($(which).attr('class') != 'active'){
            $(which).fadeIn(2000, function(){
                $(this).addClass('active');
            });
        }
    });
});
...