버튼 클릭 애니메이션 많은 버튼

Question

버튼 클릭시 애니메이션을 추가하려고하는데 버튼에 애니메이션을 표시 할 수 있지만 모든 버튼에 애니메이션을 표시하고 애니메이션 클래스를 n 개 만들 수 없습니다. 버튼의 수입니다.

현재 애니메이션 화하는 버튼 하나에 div를 하나 추가했습니다. 그러나 별도의 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; 
} 

자바 스크립트 코드

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>

입니다