jQuery的父動畫第二次點擊（關閉/回滾）不工作

我在得到一個功能與動畫到第二/關閉點擊工作的問題。它適用於第一次點擊，但...下面的代碼：jQuery的父動畫第二次點擊（關閉/回滾）不工作

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。我會感謝任何答案！

在此先感謝！

來源

2015-05-30 Andreas Søgaard Pedersen

這裏是不添加類的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; 
});

來源

2015-05-30 23:42:15

-1

也許嘗試這一個。

既然您有相關的動畫疊加的問題，這一串代碼只是確保股利是在正確的位置，以允許打開或關閉動畫。

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鏈接。您不需要爲「動畫」功能設置所有這些選項設置。順便說一句，我是新來這個網站，我不知道爲什麼我已經downvoted如此之快。如果「downvoter」能告訴我爲什麼也許我可以學習和提高我的答案...

來源

2015-05-30 23:30:17

jQuery的父動畫第二次點擊（關閉/回滾）不工作

回答

相關問題