Основная проблема со слайдом toggle() снизу вверх

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

«.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? Я что-то упускаю? Извините, если это звучит слишком просто. Заранее спасибо.


toggle jquery jquery-animate
person Beto    schedule 12.11.2010    source источник
comment
Можете ли вы показать это в действии — либо на своем сайте, либо на jsfiddle.net.   -  person DaiYoukai    schedule 12.11.2010

Ответы (1)


arrow_upward
1
arrow_downward

Второй шаг должен скрыть 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 и сдвиньте его, например это.

person ifaour    schedule 12.11.2010