jQuery parent animate второй клик (закрыть/откат) не работает

Question

У меня возникла проблема с получением функции с анимацией для работы во втором/закрывающемся щелчке. Он работает на первый щелчок, хотя ... Вот код:

HTML:

<div id="about"> 
    <div id="aboutbtn-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
    <div id="aboutbtn">About me</div> 
    <div class="social-icons"> 
    <a href="#"><img src="http://placehold.it/43x43"></a> 
    <a href="#"><img src="http://placehold.it/43x43"></a> 
    </div> 
</div> 

CSS:

#about { 
    background: #336699; 
    height: 561px; 
    width: 300px; 
    position:absolute; 
    top: 0%; 
    right:-285px; 
} 

#aboutbtn { 
    background: #336699; 
    background-size: contain; 
    background-repeat: no-repeat; 
    width: 85px; 
    height: 35px; 
    text-align: center; 
    padding: 35px 10px; 
    font-size: 18px; 
    cursor: pointer; 
    color: #fff; 
    position: absolute; 
    left: -85px; 
    margin-top: 20px; 
    margin-right: 15px; 
    display: block !important; 
} 

#aboutbtn-content { 
    float: left; 
    padding: 35px 30px; 
} 

.social-icons { 
    position: absolute; 
    left: -63px; 
    top: 140px; 
} 

.social-icons img { 
    display: block; 
    margin-bottom: 10px; 
} 

Javascript:

$(document).ready(function() { 
$("#aboutbtn").click(function() { 
    $(this).parent().animate({ 
     right: '-280px' 
    }, { 
     queue: false, 
     duration: 500 
    }); 
}, function() { 
    $(this).parent().animate({ 
     right: '0px' 
    }, { 
     queue: false, 
     duration: 500 
    }); 
}); 
}); 

Я сделал jsfiddle you can see by clicking here ,

У меня есть вдохновение from this fiddle, разница только в том, что я изменил его, чтобы переключиться.

Я не самый острый JS-кодер, поэтому, пожалуйста, несите меня: D. Буду признателен за любой ответ!

Заранее благодарен!

Answer 1

Вот очень упрощенный метод без дополнительных накладных расходов на добавление классов в элементы dom, а затем запрос элементов dom снова и снова.

В основном мы устанавливаем переменную open в false, на проверку Нажмите, чтобы увидеть, если open является false, если да, то установите open в true (потому что его теперь открыта), а затем открыть его, если нет, то установите open в false и закрыть его

(Demo)

var open = false; 
$("#aboutbtn").click(function() { 
    if(!open) $(this).parent().animate({ right: '0px'}, 500); 
    else $(this).parent().animate({ right: '-285px'}, 500); 
    open = !open ? true : false; 
}); 

Answer 2

Попробуйте это, возможно.

Поскольку у вас возникли проблемы с укладкой анимаций, этот кусок кода просто убедитесь, что div находится в правильном положении, чтобы разрешить открытие или закрытие анимации.

http://jsfiddle.net/bdasilva/93v3qayh/9/

$("#aboutbtn").click(function() { 
    var parentPos = $(this).parent().css('right').split('px')[0]; 
    var targetPos = (parentPos == 0 ? -280 : 0); 
    $(this).parent().animate({right:targetPos}, 500); 
}); 

Я сократил код и предоставил jsfiddle ссылку с моим последним редактированием. Вам не нужны все эти параметры для вашей «анимационной» функции. Кстати, я новичок в этом сайте, и я не знаю, почему я был так низко поставлен. Если «downvoter» мог бы рассказать мне, почему, возможно, я мог бы изучить и улучшить свои ответы ...