jQuery slideToggle не работает должным образом при использовании с fadeTo - PullRequest
Новая
       38

jQuery slideToggle не работает должным образом при использовании с fadeTo

0 голосов
/ 25 января 2012

Я хотел бы изменить непрозрачность элемента div, а затем сдвинуть его вверх или вниз, чтобы просмотреть его содержимое, но анимация скольжения ведет себя очень странно, как можно увидеть здесь:

http://jsfiddle.net/NsYtr/

Однако, если я уберу fadeTo в функции щелчка, скольжение будет работать должным образом.

Чего мне здесь не хватает, чтобы #user_box div изменил непрозрачность, а затем скользил?

Разметка: 

  <div id="user_bar"></div>
  <div id="user_box">
      <a href="#">blah</a>
      <a href="#">blah</a>
      <a href="#">blah</a>          
  </div>

ЯШ: 

$("#user_bar").hover(function(){
    $(this).fadeTo(100, 0.5);
}, function(){
    $(this).fadeTo(100, 0.7);
});

$("#user_bar").click(function(){
    $("#user_box").fadeTo(0, 0.5);
    $("#user_box").slideToggle();
});

CSS: 

#user_bar {
  height: 10px;
  width:100%;
  position: fixed;
  top: 80px;    
  left: 0;
  right: 0;
  overflow:hidden;    
  cursor: pointer;
  background-color: #000;
}

#user_box {
  display:none;
  width: 100%;
  height: 50px;
  position: fixed;
  top: 90px;    
  left: 0;
  right: 0;
  overflow:hidden;    
  background-color: #000;
}

Ответы [ 2 ]

0 голосов
/ 25 января 2012

Секвенирование достаточно просто, вам просто нужно вызвать slideToggle () в обратном вызове для fadeTo ().

Ошибка - это другая история.Я не могу догадаться, почему fadeTo () портит slideToggle () и делает его всегда закрытым, а не открытым.

Однако я смог обойти его, используя animate () напрямую: 

$("#user_bar").click(function(){
    $("#user_box").animate({opacity: .5}, {
        duration: 100,
        complete: function() { $('#user_box').slideToggle(); }
    });
});

Вот обновление вашей скрипки, демонстрирующее это

0 голосов
/ 25 января 2012

изменить user_box на user_bar: 

$("#user_bar").click(function(){
    $("#user_bar").fadeTo(0, 0.5);
    $("#user_box").slideToggle();

});

EDIT: или еще лучше, измените его на $ (это)

...