Основная проблема с переключателем «снизу вверх» - PullRequest
Новая
       20

Основная проблема с переключателем «снизу вверх»

2 голосов
/ 12 ноября 2010

Этот код на самом деле работает, но не совсем так, как я ожидаю.

". SocialSlide" - это div, расположенный в нижней части страницы, с прикрепленной к нему якорной "вкладкой".Остальная часть div скрыта внизу.Идея состоит в том, чтобы div отображал или скрывал с помощью анимации либо по щелчку, либо при наведении на эту ссылку. 

// Adding the anchor link and hiding the rest of the div   
$('.socialSlide').prepend('<a href="#" class="ssOpen">Share</a>').css('bottom', '-77px');

И добавление функции переключения к этому якору 

    /*add socialSlide toggle*/
$('.socialSlide a.ssOpen').toggle(function() {
    $(this).parent().stop().animate({"bottom": "-25px"},{ queue:false, duration:900, easing: 'easeInOutQuint'});
    }, function() {     
    $(this).parent().stop().animate({"bottom": "70px"},{ queue:false, duration:900, easing: 'easeInOutQuint'});

Что происходит:

  1. Якорь получает первую команду анимации при нажатии.Отлично.

  2. Еще один щелчок по ссылке привязки должен скрыть div, как и раньше, но этого не происходит.Он увеличивается как минимум на 70 пикселей.

  3. Третий щелчок на якоре, кажется, правильно выполняет вторую функцию (), а затем первый, начиная с этого момента.

Итак, что может происходить на шаге 2?Я что-то пропустил?Извинения, если это звучит слишком элементарно.Заранее спасибо.

1 Ответ

1 голос
/ 12 ноября 2010

Второй шаг должен скрывать div? тогда дно должно иметь отрицательное значение: 

$('.socialSlide a.ssOpen').toggle(function() {
    $(this).parent().stop().animate({"bottom": "-25px"},{ queue:false, duration:900});
}, function() {     
    $(this).parent().stop().animate({"bottom": "-70px"},{ queue:false, duration:900});
});

Но я не буду использовать это, чтобы скрыть элементы шоу, вместо этого обернуть содержимое другим DIV и сдвинуть его, как this .

...