按鈕點擊許多按鈕動畫

Question

我想添加動畫按鈕點擊，所以我能夠顯示按鈕上的動畫，但我想在每個按鈕上顯示動畫，並且我不能創建n個動畫類的n個按鈕數量。

目前我添加了一個按鈕，我動畫一個div。但很難爲單獨的按鈕添加單獨的div。

HTML代碼： -

<a data-toggle="tab" href="#paper"> 
    <button type="button" class="btn btn-secondary btn-primary-custom" id="btn_Paper" onclick="buttonMediaPressed(this.id)"> 
    Paper 
    </button> 
</a>        
<a data-toggle="tab" href="#news" > 
    <button type="button" class="btn btn-secondary btn-primary-custom" id="btn_News" onclick="buttonMediaPressed(this.id)"> 
    News 
</button> 
</a> 
<a data-toggle="tab" href="#web" > 
    <button type="button" class="btn btn-secondary btn-primary-custom" id="btn_Website" onclick="buttonMediaPressed(this.id)"> 
     Website 
     <div class="circle"></div>          
    </button> 
</a> 

目前我已經添加了動畫類唯一網站按鈕。但我需要爲其他按鈕添加它。我有近40-50個按鈕，我無法創建相同數量的div。

CSS代碼

.circle { 


position: absolute; 
    width : 50px !important;  
    height : 35px !important; 
    margin-top:-32px; 
    margin-left:-12px; 
    border:2px solid green !important; 
    -webkit-transform: scale(4); 
    -moz-transform: scale(0); 
    transform: scale(0); 
    -webkit-border-radius : 50%; 
    -webkit-transition: all 0.4s ease-out; 
    -moz-transition: all 0.4s ease-out; 
    transition: all 0.4s ease-out; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    -ms-border-radius: 50%; 
    -o-border-radius: 50%; 
    border-radius: 50%; 
    } 

    .open.circle { 
    opacity: 100; 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    transform: scale(1); 

    } 


.circle a { 
    text-decoration: none; 
    color: white; 
    display: block; 
    height: 40px; 
    width: 40px; 
    line-height: 40px; 
    margin-left: -20px; 
    margin-top: -20px; 
    position: absolute; 
    text-align: center; 

} 

.circle a:hover { 
    color: #eef; 
} 

JavaScript代碼

function buttonMediaPressed(clicked_btn_id){ 

     console.log("In buttonMediaPressed function :- " +clicked_btn_id); 

     else if(clicked_btn_id.localeCompare("btn_BT") == 0){  
      $('.circle').toggleClass('open'); 
     setTimeout(function(){ 
      //change image back 
      $('.circle').toggleClass('open'); 
     }, 300);     
} 

我創建它在屏幕下方顯示的動畫。按鈕點擊圓圈後會進入和退出按鈕區域。

請建議我如何做到這一點。或者有什麼好的參考。

Answer 1

據我瞭解問題，問題是不得不將這些div添加到按鈕，對不對？

如果函數已經綁定到這些按鈕，您可以在點擊時動態添加div。 https://jsfiddle.net/njcLzv9y/

下面的代碼

buttonMediaPressed = function(clicked_btn_id) { 
 
    console.log("In buttonMediaPressed function :- " + clicked_btn_id); 
 
    var circle = $('#' + clicked_btn_id + ' .circle'); 
 
    if (!circle.length) { 
 
    $('#' + clicked_btn_id).append('<div class="circle"></div>'); 
 
    circle = $('#' + clicked_btn_id + ' .circle'); 
 
    } 
 
    setTimeout(function() { 
 
    circle.toggleClass('open'); 
 

 
    }) 
 
    setTimeout(function() { 
 
    //change image back 
 
    circle.toggleClass('open'); 
 

 
    }, 300); 
 
}

.circle { 
 
    position: absolute; 
 
    width: 50px !important; 
 
    height: 35px !important; 
 
    margin-top: -32px; 
 
    margin-left: -12px; 
 
    border: 2px solid green !important; 
 
    -webkit-transform: scale(0); 
 
    -moz-transform: scale(0); 
 
    transform: scale(0); 
 
    -webkit-border-radius: 50%; 
 
    -webkit-transition: all 0.4s ease-out; 
 
    -moz-transition: all 0.4s ease-out; 
 
    transition: all 0.4s ease-out; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    -ms-border-radius: 50%; 
 
    -o-border-radius: 50%; 
 
    border-radius: 50%; 
 
    opacity: 0; 
 
} 
 
.open.circle { 
 
    opacity: 100; 
 
    -webkit-transform: scale(1); 
 
    -moz-transform: scale(1); 
 
    transform: scale(1); 
 
} 
 
.circle a { 
 
    text-decoration: none; 
 
    color: white; 
 
    display: block; 
 
    height: 40px; 
 
    width: 40px; 
 
    line-height: 40px; 
 
    margin-left: -20px; 
 
    margin-top: -20px; 
 
    position: absolute; 
 
    text-align: center; 
 
} 
 
.circle a:hover { 
 
    color: #eef; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<a data-toggle="tab" href="#paper"> 
 
    <button type="button" class="btn btn-secondary btn-primary-custom" id="btn_Paper" onclick="buttonMediaPressed(this.id)"> 
 
    Paper 
 
    </button> 
 
</a> 
 
<a data-toggle="tab" href="#news"> 
 
    <button type="button" class="btn btn-secondary btn-primary-custom" id="btn_News" onclick="buttonMediaPressed(this.id)"> 
 
    News 
 
    <span></span> 
 
    </button> 
 
</a> 
 
<a data-toggle="tab" href="#web"> 
 
    <button type="button" class="btn btn-secondary btn-primary-custom" id="btn_Website" onclick="buttonMediaPressed(this.id)"> 
 
    Website 
 
    <div class="circle"></div> 
 
    </button> 
 
</a>