ボタン多くのボタンのアニメーションをクリックします

Question

ボタンクリックでアニメーションを追加しようとしていますので、ボタンでアニメーションを表示できますが、すべてのボタンにアニメーションを表示したいので、n個のアニメーションクラスをn個作成できませんボタンの数。

現在のところ、アニメーション化する1つのボタンに1つの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>

です