许多按钮的按钮单击动画

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>