jquery - 如何在点击时激活和非激活-6ren

jquery - 如何在点击时激活和非激活

转载作者：可可西里更新时间：2023-11-01 14:59:03

How to make buttons active and inactive on click? am having 5 button each one has its own function. when click on A button some animation will start continuously,if click on same A button how to stop animation, how to make rest of the four buttons has to disable and when click on the active one rest of the buttons has to disable.thanks in advance (suppose if A is clicked it has to active and B C D E has to be disabled and if A is clicked again it has to come to normal state B C D E has to enable)

function bubbles() { 
$.each($(".particletext.bubbles"), function(){
var bubblecount = 4;
for(var i = 0; i <= bubblecount; i++) {
var size = ((Math.floor( Math.random() * (80 - 40 + 1) ) + 40)/10);
$(this).append('<span class="particle" style="top:' + 27 + '%; left:' + (Math.floor( Math.random() * (95 - 0 + 1) ) + 0) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + 0.1 + 's;"></span>');
}
}); 
}


function hearts() {
$.each($(".particletext.hearts"), function(){
var heartcount = 3;
for(var i = 0; i <= heartcount; i++) {
var size = ((Math.floor( Math.random() * (120 - 60 + 1) ) + 60)/10);
$(this).append('<span class="particle" style="top:' + 11 + '%; left:' + (Math.floor( Math.random() * (95 - 0 + 1) ) + 0) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + 0.1 + 's;"></span>');
}
});
}

function confetti() {
$.each($(".particletext.confetti"), function(){
var confetticount = 4;
for(var i = 0; i <= confetticount; i++) {
$(this).append('<span class="particle c' +(Math.floor( Math.random() * (2 - 1 + 1) ) + 1) + '" style="top:' + (Math.floor( Math.random() * (50 - 10 + 1) ) + 10) + '%; left:' + (Math.floor( Math.random() * (100 - 0 + 1) ) + 0) + '%;width:' + (Math.floor( Math.random() * (8 - 6 + 1) ) + 6)+ 'px; height:' + (Math.floor( Math.random() * (4 - 3+ 1) ) + 3) + 'px;animation-delay: ' + 0.1 + 's;"></span>');
}
});
}

function fire() {
$.each($(".particletext.fire"), function(){
var firecount = 2;
for(var i = 0; i <= firecount; i++) {
var size = Math.floor( Math.random() * (12 - 8 + 1) ) + 8;
$(this).append('<span class="particle" style="top:' + (Math.floor( Math.random() * (70 - 40 + 1) ) + 40) + '%; left:' + (Math.floor( Math.random() * (1 +20 + 11) ) + 1) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + 0.1 + 's;"></span>');
}
});
}

function sunbeams() {
$.each($(".particletext.sunbeams"), function(){
var linecount = 3;
for(var i = 0; i <= linecount; i++) {
$(this).append('<span class="particle" style="top:' + (Math.floor( Math.random() * (0 + 40 + 1) ) - 40) + '%; left:' + (Math.floor( Math.random() * (100 - 0 + 1) ) + 0) + '%;width:' +(Math.floor( Math.random() * (2 - 1 + 1) ) + 1 )+ 'px; height:' + 35 + '%;animation-delay: -' + 0.1 + 's;"></span>');
}
});
}

.particletext {
text-align: center;
font-size: 48px;
position: relative;
}
.particletext.bubbles > .particle {
opacity: 0;
position: absolute;
background-color: rgba(33, 149, 243, 0.603);
-webkit-animation: bubbles 3s ease-in infinite;
animation: bubbles 3s ease-in infinite;
border-radius: 100%;
}
.particletext.hearts > .particle {
opacity: 0;
position: absolute;
background-color: rgba(204,42,93,1);
-webkit-animation: hearts 3s ease-in infinite;
animation: hearts 3s ease-in infinite;
}
.particletext.hearts > .particle:before,.particletext.hearts > .particle:after {
position: absolute;
content: '';
border-radius: 100px;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(204,42,93,1);
}
.particletext.hearts > .particle:before {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.particletext.hearts > .particle:after {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.particletext.lines > .particle {
position: absolute; 
background-color: rgba(244, 67, 54, 0.5);
-webkit-animation: lines 3s linear infinite;
animation: lines 3s linear infinite;
}
.particletext.confetti > .particle {
opacity: 0;
position: absolute;
-webkit-animation: confetti 3s ease-in infinite;
animation: confetti 3s ease-in infinite;
}
.particletext.confetti > .particle.c1 {
background-color: rgba(76, 175, 80, 0.5);
}
.particletext.confetti > .particle.c2 {
background-color: rgba(156, 39, 176, 0.5);
}
.particletext.fire > .particle {
position: absolute;
background-color: rgba(7, 141, 255, 0.5);
border-radius: 40px;
border-top-right-radius: 0px;
-webkit-animation: fires 0.8s linear infinite;
animation: fires 0.8s linear infinite;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
opacity: 0;
}
.particletext.fire > .particle:before {
position: absolute;
content: '';
top: 60%;
left: 40%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 50%;
height: 50%;
border-radius: 40px;
border-top-right-radius: 0px;
background-color: rgba(0, 66, 251, 0.5);
}
.particletext.sunbeams > .particle {
position: absolute;
background-color:#dc3dd5;
border-radius: 100px;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
-webkit-animation: sunbeams 3s linear infinite;
animation: sunbeams 3s linear infinite;
}
@-webkit-keyframes bubbles {
0% {
opacity: 0;
}
20% {
opacity: 1;
-webkit-transform: translate(0, -20%);
transform: translate(0, -20%);
}
100% {
opacity: 0;
-webkit-transform: translate(0, -1000%);
transform: translate(0, -1000%);
}
} 
@keyframes bubbles {
0% {
opacity: 0;
}
20% {
opacity: 1;
-webkit-transform: translate(0, -20%);
transform: translate(0, -20%);
}
100% {
opacity: 0;
-webkit-transform: translate(0, -1000%);
transform: translate(0, -1000%);
}
}
@-webkit-keyframes hearts {
0% {
opacity: 0;
-webkit-transform: translate(0, 0%) rotate(45deg);
transform: translate(0, 0%) rotate(45deg);
}
20% {
opacity: 0.8;
-webkit-transform: translate(0, -20%) rotate(45deg);
transform: translate(0, -20%) rotate(45deg);
}
100% {
opacity: 0;
-webkit-transform: translate(0, -1000%) rotate(45deg);
 transform: translate(0, -1000%) rotate(45deg);
}
}
@keyframes hearts {
0% {
opacity: 0;
-webkit-transform: translate(0, 0%) rotate(45deg);
transform: translate(0, 0%) rotate(45deg);
}
20% {
opacity: 0.8;
-webkit-transform: translate(0, -20%) rotate(45deg);
transform: translate(0, -20%) rotate(45deg);
}
100% {
opacity: 0;
-webkit-transform: translate(0, -1000%) rotate(45deg);
transform: translate(0, -1000%) rotate(45deg);
}
}
@-webkit-keyframes lines {
0%, 50%, 100% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
25% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
75% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@keyframes lines {
0%, 50%, 100% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
25% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
75% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-webkit-keyframes confetti {
0% {
opacity: 0;
-webkit-transform: translateY(0%) rotate(0deg);
transform: translateY(0%) rotate(0deg);
}
10% {
opacity: 1;
}
35% {
-webkit-transform: translateY(-800%) rotate(270deg);
transform: translateY(-800%) rotate(270deg);
}
80% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translateY(2000%) rotate(1440deg);
transform: translateY(2000%) rotate(1440deg);
}
}
@keyframes confetti {
0% {
opacity: 0;
-webkit-transform: translateY(0%) rotate(0deg);
transform: translateY(0%) rotate(0deg);
}
10% {
opacity: 1;
}
35% {
-webkit-transform: translateY(-800%) rotate(270deg);
transform: translateY(-800%) rotate(270deg);
}
80% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translateY(2000%) rotate(1440deg);
transform: translateY(2000%) rotate(1440deg);
}
}
@-webkit-keyframes fires {
0% {
-webkit-transform: rotate(-70deg) translateY(0%);
transform: rotate(-70deg) translateY(0%);
}
25% {
-webkit-transform: rotate(-20deg) translateY(-5%);
transform: rotate(-20deg) translateY(-5%);
opacity: 1;
}
50% {
-webkit-transform: rotate(-70deg) translateY(-10%);
transform: rotate(-70deg) translateY(-10%);
}
75% {
-webkit-transform: rotate(-20deg) translateY(-20%);
transform: rotate(-20deg) translateY(-20%);
}
100% {
-webkit-transform: rotate(-70deg) translateY(-40%);
transform: rotate(-70deg) translateY(-40%);
opacity: 1;
}
}
@keyframes fires {
0% {
-webkit-transform: rotate(-70deg) translateY(0%);
transform: rotate(-70deg) translateY(0%);
}
25% {
-webkit-transform: rotate(-20deg) translateY(-5%);
transform: rotate(-20deg) translateY(-5%);
opacity: 1;
}
50% {
-webkit-transform: rotate(-70deg) translateY(-10%);
transform: rotate(-70deg) translateY(-10%);
}
75% {
-webkit-transform: rotate(-20deg) translateY(-20%);
transform: rotate(-20deg) translateY(-20%);
}
100% {
-webkit-transform: rotate(-70deg) translateY(-40%);
transform: rotate(-70deg) translateY(-40%);
opacity: 1;
}
}
@-webkit-keyframes sunbeams {
0% {
-webkit-transform: translateY(40%) rotate(0deg);
transform: translateY(40%) rotate(0deg);
}
50% {
-webkit-transform: translateY(-40%) rotate(180deg);
transform: translateY(-40%) rotate(180deg);
}
100% {
-webkit-transform: translateY(40%) rotate(360deg);
transform: translateY(40%) rotate(360deg);
}
0%,14%,17%,43%,53%,71%,80%,94%,100% {
opacity: 0;
}
6%,15%,24%,28%,48%,55%,78%,82%,99% {
opacity: 1;
}
}
@keyframes sunbeams {
0% {
-webkit-transform: translateY(40%) rotate(0deg);
transform: translateY(40%) rotate(0deg);
}
50% {
-webkit-transform: translateY(-40%) rotate(180deg);
transform: translateY(-40%) rotate(180deg);
}
100% {
-webkit-transform: translateY(40%) rotate(360deg);
transform: translateY(40%) rotate(360deg);
}
0%,14%,17%,43%,53%,71%,80%,94%,100% {
opacity: 0;
}
6%,15%,24%,28%,48%,55%,78%,82%,99% {
opacity: 1;
}
}

ul.socialIcons {
padding: 0;
text-align: center;
}

.socialIcons li {
background: #fff;
list-style: none;
display: inline-block;
margin: 0 25px;
font-size: 12px;
}


.socialIcons li a {
text-decoration: none;
color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="socialIcons">
<li class="particletext hearts" onclick="hearts()"><a>A</a></li>
<li class="particletext bubbles" onclick="bubbles()"><a>B</a></li>
<li class="particletext sunbeams" onclick="sunbeams()"><a>C</a></li>
<li class="particletext confetti" onclick="confetti()"><a>D</a></li>
<li class="particletext fire" onclick="fire()"><a>E</a></li>
</ul>

最佳答案

@aryana 这是您上次想要的解决方案。现在当一个按钮被点击时，它会触发它的动画，你可以通过再次点击它来停止它。如果单击任何其他可禁用按钮，则其他按钮及其任何正在运行的动画将停止，并且该按钮的动画将被触发。
我对 js 文件和 html 文件做了一些更改。并通过评论指出更改。

// My code starts here

var clickedElement = ""; //track the click element
var elementClassName;

$('.particletext').click(function () {
  
  $('.particletext').children('span').remove(); //remove animation for click
  elementClassName = $(this).attr('class'); 
  
  if (clickedElement == elementClassName) { //if the same element is clicked again then it simply null the clickedElement
      clickedElement = "";
  } else { //if different element is clicked then it store the element class in clickedElement and fires the respective animation animation
    
      clickedElement = elementClassName;
      elementFunctionName = (elementClassName.split(" "))[1];
  
      if (elementFunctionName == "hearts") {
          hearts();
      } else if (elementFunctionName == "bubbles") {
          bubbles();
      } else if (elementFunctionName == "sunbeams") {
          sunbeams();
      } else if (elementFunctionName == "confetti") {
          confetti();
      } else if (elementFunctionName == "fire") {
          fire();
      }
   
  }
  
})

// My code ends here

function stopAnimation(element) {
  $(element).children('span').remove(); //remove animating particles
  
  //for second click re-add onclick functions to all elements
  $('.hearts').each(function() {
    $(this).attr("onclick", "hearts()");
    $(this).attr("onclick");
  })
  
  $('.bubbles').each(function() {
    $(this).attr("onclick", "bubbles()");
    $(this).attr("onclick");
  })
  $('.sunbeams').each(function() {
    $(this).attr("onclick", "sunbeams()");
  })
  $('.confetti').each(function() {
    $(this).attr("onclick", "confetti()");
  })
  $('.fire').each(function() {
    $(this).attr("onclick", "fire()");
  })
}

function bubbles() { 
$.each($(".particletext.bubbles"), function(){
var bubblecount = 4;
for(var i = 0; i <= bubblecount; i++) {
var size = ((Math.floor( Math.random() * (80 - 40 + 1) ) + 40)/10);
$(this).append('<span class="particle" style="top:' + 27 + '%; left:' + (Math.floor( Math.random() * (95 - 0 + 1) ) + 0) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + 0.1 + 's;"></span>');
}
}); 
}


function hearts() {
$.each($(".particletext.hearts"), function(){
var heartcount = 3;
for(var i = 0; i <= heartcount; i++) {
var size = ((Math.floor( Math.random() * (120 - 60 + 1) ) + 60)/10);
$(this).append('<span class="particle" style="top:' + 11 + '%; left:' + (Math.floor( Math.random() * (95 - 0 + 1) ) + 0) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + 0.1 + 's;"></span>');
}
});
}

function confetti() {
$.each($(".particletext.confetti"), function(){
var confetticount = 4;
for(var i = 0; i <= confetticount; i++) {
$(this).append('<span class="particle c' +(Math.floor( Math.random() * (2 - 1 + 1) ) + 1) + '" style="top:' + (Math.floor( Math.random() * (50 - 10 + 1) ) + 10) + '%; left:' + (Math.floor( Math.random() * (100 - 0 + 1) ) + 0) + '%;width:' + (Math.floor( Math.random() * (8 - 6 + 1) ) + 6)+ 'px; height:' + (Math.floor( Math.random() * (4 - 3+ 1) ) + 3) + 'px;animation-delay: ' + 0.1 + 's;"></span>');
}
});
}

function fire() {
$.each($(".particletext.fire"), function(){
var firecount = 2;
for(var i = 0; i <= firecount; i++) {
var size = Math.floor( Math.random() * (12 - 8 + 1) ) + 8;
$(this).append('<span class="particle" style="top:' + (Math.floor( Math.random() * (70 - 40 + 1) ) + 40) + '%; left:' + (Math.floor( Math.random() * (1 +20 + 11) ) + 1) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + 0.1 + 's;"></span>');
}
});
}

function sunbeams() {
$.each($(".particletext.sunbeams"), function(){
var linecount = 3;
for(var i = 0; i <= linecount; i++) {
$(this).append('<span class="particle" style="top:' + (Math.floor( Math.random() * (0 + 40 + 1) ) - 40) + '%; left:' + (Math.floor( Math.random() * (100 - 0 + 1) ) + 0) + '%;width:' +(Math.floor( Math.random() * (2 - 1 + 1) ) + 1 )+ 'px; height:' + 35 + '%;animation-delay: -' + 0.1 + 's;"></span>');
}
});
}

.particletext {
text-align: center;
font-size: 48px;
position: relative;
}
.particletext.bubbles > .particle {
opacity: 0;
position: absolute;
background-color: rgba(33, 149, 243, 0.603);
-webkit-animation: bubbles 3s ease-in infinite;
animation: bubbles 3s ease-in infinite;
border-radius: 100%;
}
.particletext.hearts > .particle {
opacity: 0;
position: absolute;
background-color: rgba(204,42,93,1);
-webkit-animation: hearts 3s ease-in infinite;
animation: hearts 3s ease-in infinite;
}
.particletext.hearts > .particle:before,.particletext.hearts > .particle:after {
position: absolute;
content: '';
border-radius: 100px;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(204,42,93,1);
}
.particletext.hearts > .particle:before {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.particletext.hearts > .particle:after {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.particletext.lines > .particle {
position: absolute; 
background-color: rgba(244, 67, 54, 0.5);
-webkit-animation: lines 3s linear infinite;
animation: lines 3s linear infinite;
}
.particletext.confetti > .particle {
opacity: 0;
position: absolute;
-webkit-animation: confetti 3s ease-in infinite;
animation: confetti 3s ease-in infinite;
}
.particletext.confetti > .particle.c1 {
background-color: rgba(76, 175, 80, 0.5);
}
.particletext.confetti > .particle.c2 {
background-color: rgba(156, 39, 176, 0.5);
}
.particletext.fire > .particle {
position: absolute;
background-color: rgba(7, 141, 255, 0.5);
border-radius: 40px;
border-top-right-radius: 0px;
-webkit-animation: fires 0.8s linear infinite;
animation: fires 0.8s linear infinite;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
opacity: 0;
}
.particletext.fire > .particle:before {
position: absolute;
content: '';
top: 60%;
left: 40%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 50%;
height: 50%;
border-radius: 40px;
border-top-right-radius: 0px;
background-color: rgba(0, 66, 251, 0.5);
}
.particletext.sunbeams > .particle {
position: absolute;
background-color:#dc3dd5;
border-radius: 100px;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
-webkit-animation: sunbeams 3s linear infinite;
animation: sunbeams 3s linear infinite;
}
@-webkit-keyframes bubbles {
0% {
opacity: 0;
}
20% {
opacity: 1;
-webkit-transform: translate(0, -20%);
transform: translate(0, -20%);
}
100% {
opacity: 0;
-webkit-transform: translate(0, -1000%);
transform: translate(0, -1000%);
}
} 
@keyframes bubbles {
0% {
opacity: 0;
}
20% {
opacity: 1;
-webkit-transform: translate(0, -20%);
transform: translate(0, -20%);
}
100% {
opacity: 0;
-webkit-transform: translate(0, -1000%);
transform: translate(0, -1000%);
}
}
@-webkit-keyframes hearts {
0% {
opacity: 0;
-webkit-transform: translate(0, 0%) rotate(45deg);
transform: translate(0, 0%) rotate(45deg);
}
20% {
opacity: 0.8;
-webkit-transform: translate(0, -20%) rotate(45deg);
transform: translate(0, -20%) rotate(45deg);
}
100% {
opacity: 0;
-webkit-transform: translate(0, -1000%) rotate(45deg);
 transform: translate(0, -1000%) rotate(45deg);
}
}
@keyframes hearts {
0% {
opacity: 0;
-webkit-transform: translate(0, 0%) rotate(45deg);
transform: translate(0, 0%) rotate(45deg);
}
20% {
opacity: 0.8;
-webkit-transform: translate(0, -20%) rotate(45deg);
transform: translate(0, -20%) rotate(45deg);
}
100% {
opacity: 0;
-webkit-transform: translate(0, -1000%) rotate(45deg);
transform: translate(0, -1000%) rotate(45deg);
}
}
@-webkit-keyframes lines {
0%, 50%, 100% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
25% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
75% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@keyframes lines {
0%, 50%, 100% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
25% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
75% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-webkit-keyframes confetti {
0% {
opacity: 0;
-webkit-transform: translateY(0%) rotate(0deg);
transform: translateY(0%) rotate(0deg);
}
10% {
opacity: 1;
}
35% {
-webkit-transform: translateY(-800%) rotate(270deg);
transform: translateY(-800%) rotate(270deg);
}
80% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translateY(2000%) rotate(1440deg);
transform: translateY(2000%) rotate(1440deg);
}
}
@keyframes confetti {
0% {
opacity: 0;
-webkit-transform: translateY(0%) rotate(0deg);
transform: translateY(0%) rotate(0deg);
}
10% {
opacity: 1;
}
35% {
-webkit-transform: translateY(-800%) rotate(270deg);
transform: translateY(-800%) rotate(270deg);
}
80% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translateY(2000%) rotate(1440deg);
transform: translateY(2000%) rotate(1440deg);
}
}
@-webkit-keyframes fires {
0% {
-webkit-transform: rotate(-70deg) translateY(0%);
transform: rotate(-70deg) translateY(0%);
}
25% {
-webkit-transform: rotate(-20deg) translateY(-5%);
transform: rotate(-20deg) translateY(-5%);
opacity: 1;
}
50% {
-webkit-transform: rotate(-70deg) translateY(-10%);
transform: rotate(-70deg) translateY(-10%);
}
75% {
-webkit-transform: rotate(-20deg) translateY(-20%);
transform: rotate(-20deg) translateY(-20%);
}
100% {
-webkit-transform: rotate(-70deg) translateY(-40%);
transform: rotate(-70deg) translateY(-40%);
opacity: 1;
}
}
@keyframes fires {
0% {
-webkit-transform: rotate(-70deg) translateY(0%);
transform: rotate(-70deg) translateY(0%);
}
25% {
-webkit-transform: rotate(-20deg) translateY(-5%);
transform: rotate(-20deg) translateY(-5%);
opacity: 1;
}
50% {
-webkit-transform: rotate(-70deg) translateY(-10%);
transform: rotate(-70deg) translateY(-10%);
}
75% {
-webkit-transform: rotate(-20deg) translateY(-20%);
transform: rotate(-20deg) translateY(-20%);
}
100% {
-webkit-transform: rotate(-70deg) translateY(-40%);
transform: rotate(-70deg) translateY(-40%);
opacity: 1;
}
}
@-webkit-keyframes sunbeams {
0% {
-webkit-transform: translateY(40%) rotate(0deg);
transform: translateY(40%) rotate(0deg);
}
50% {
-webkit-transform: translateY(-40%) rotate(180deg);
transform: translateY(-40%) rotate(180deg);
}
100% {
-webkit-transform: translateY(40%) rotate(360deg);
transform: translateY(40%) rotate(360deg);
}
0%,14%,17%,43%,53%,71%,80%,94%,100% {
opacity: 0;
}
6%,15%,24%,28%,48%,55%,78%,82%,99% {
opacity: 1;
}
}
@keyframes sunbeams {
0% {
-webkit-transform: translateY(40%) rotate(0deg);
transform: translateY(40%) rotate(0deg);
}
50% {
-webkit-transform: translateY(-40%) rotate(180deg);
transform: translateY(-40%) rotate(180deg);
}
100% {
-webkit-transform: translateY(40%) rotate(360deg);
transform: translateY(40%) rotate(360deg);
}
0%,14%,17%,43%,53%,71%,80%,94%,100% {
opacity: 0;
}
6%,15%,24%,28%,48%,55%,78%,82%,99% {
opacity: 1;
}
}

ul.socialIcons {
padding: 0;
text-align: center;
}

.socialIcons li {
background: #fff;
list-style: none;
display: inline-block;
margin: 0 25px;
font-size: 12px;
}


.socialIcons li a {
text-decoration: none;
color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- all onclick methods are removed -->
<ul class="socialIcons">
<li class="particletext hearts"><a>A</a></li>
<li class="particletext bubbles"><a>B</a></li>
<li class="particletext sunbeams"><a>C</a></li>
<li class="particletext confetti"><a>D</a></li>
<li class="particletext fire"><a>E</a></li>
</ul>

关于jquery - 如何在点击时激活和非激活，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56962309/

文章推荐： Hadoop distcp 错误

文章推荐： hadoop - 如何判断一个大文件是否已经在我的hdfs集群中？

javascript - 点击 child 不会触发 parent 点击
当点击content 时，我想触发我的alert。我的 content 中可以有任意数量的子元素，所以我不想对每个元素都进行硬编码。我想也许我可以监听对该父元素的点击，然后每次点击子元素都会触发我的操
objective-c - 检测 Cocoa 应用程序中的用户事件(点击、点击……)
对于 Mac 应用程序，我想检测应用程序中的用户事件，因此我可以定期让 Web 服务知道用户在端点上仍然处于事件状态。在 Cocoa Touch 中，我会覆盖 UIApplication 的 sen
Javascript-点击
第一次在这里发帖，但天知道我一直使用这个网站来搜索问题 :P 好吧，我现在遇到了自己的问题，我似乎无法轻松地在 Google 上搜索，在玩了大约 2 小时后，我终于决定发布一个问题，看看你们是怎么想的
AngularJS 点击 TouchStart
Angular 触控 ngTouch导致在触摸释放时发生点击。有没有办法让点击发生在触摸开始？ fast-click下面的指令似乎可以在触摸屏上执行我想要的操作，但它不适用于鼠标点击。 myApp.
Flutter - 点击/触摸区域如何工作？
1) 如果我有这个，当我点击子 Container 时它不会打印'tap': Container( color: Colors.red, child: GestureDetector(
jquery解除绑定(bind)点击
我简直要发疯了，只是想从 jQuery 中的事件中解除 onclick 处理程序的绑定(bind)，以便稍后可以将其绑定(bind)到另一个函数。我已将代码隔离在测试页中，因此除了核心之外什么都没有
jquery - 如何在jquery中触发Live()点击
我有一个有趣的情况。我需要触发实时点击，因为简单的点击不起作用。这就是我所拥有的: $('.text').trigger('click'); 但我需要这样的东西: $('.text').trigge
javascript - 点击 'Confirm'后没有出现警告窗口
这是我的作业，这是我第一次做表单验证。以下代码分别是我的HTML代码和JavaScript代码。 HTML 代码: First N
magento - 如何获取特定产品的浏览/点击
正如标题所示，如何获取 Magento 中特定产品的浏览量/点击量/展示次数。欢迎任何帮助。最佳答案这个简单的示例将为您提供在您指定的日期+其查看次数之间查看过的产品列表: $fromDate =
java - fragment 点击
我正在创建一个应用程序，但在其中遇到错误。我想在按钮上添加 OnclickListner。该按钮位于 fragment 类上。从这个 fragment 类我想继续另一个类。代码如下: fragment
点击 PHP "continue"
我在数组中有一些值。首先，我想在 View 中显示该数组的前两个值，接下来我想在某些按钮单击操作后显示剩余的值，并将数组索引增加 1。例如:一次点击显示第三个值，然后另一次点击显示第四个值。我怎样才
jquery - 如何查看CMD+点击
在下面的代码片段中，如果在链接上执行“CMD+CLICK”，则不会显示 alert('CMD')。这是为什么？我想在用户按下 CMD 按钮(或 Windows 上的 CTRL 键)+单击 href
javascript - 点击()开始加载
我希望在单击链接时开始加载一些内容。在单击该链接之前，我不希望它使用任何带宽。另外如何实现几乎所有灯箱中都能看到的旋转光标动画？最佳答案使用$.ajax()函数动态加载内容。对于动画，请找到一个
javascript - 点击 'a'打开两个链接
我有如下的 DOM: users 当用户点击按钮时，它会将新的“td”附加到“tr”。它运作良好。问题:单击“a”我想打开两个链接。最好的方法是首先将当前页面重定向到另一个页面，然后
javascript - 显示数组项一次(点击)
这是我正在尝试做的.. 点击按钮会显示一个随机数组项。数组项只能显示一次。目前我已经将代码设置为: 点击随机数组项显示。按钮点击继续循环，没有结束。按钮点击多次显示元素。这是代码的链接 ht
C# 编程鼠标移动/点击
我想创建...基本上是一个宏程序。点击记录后，它会记录所有鼠标(可能最终是键盘)事件。然后你可以保存，然后播放，鼠标应该移动并点击在相同的地方当你录制它时它会发生。我知道如何获取全局鼠标事件，但我不
android - ListView 点击？
我有一个关于将 onClick 添加到 ListView 的问题，我已经尝试尽可能多地遵循 Android NotePad 教程，但是对于我的布局我不太明白如何添加它。这是 Activity 类，它
javascript - 点击/点击不适用于触摸屏
我正在使用一个网站以表格的形式显示信息。用户可以单击表格中的行来更改它们的颜色，我还有一个按钮允许用户暂停页面的刷新，这样就不会添加新信息。这两个功能都适用于桌面，但不适用于触摸屏。我的第一个想法是触
javascript - 点击标签时的事件顺序
所以我的网站上有一个正常的链接，我想为它添加跟踪。我可以设想很多方法来做到这一点，但我已经确定通过编写一个小的 jquery 函数并在我的标签中放置一个小片段来实现这一点非常简单: click me!
Android - ImageButton 点击
我正在尝试使我的图片按钮看起来不错。我尝试了几种不同的方法，但它们看起来都不对。这是一个圆形图像，我想让它看起来像是可以按下的。这是我到目前为止所得到的。 android:textAppearance

可可西里

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 如何在点击时激活和非激活