Question

 <ul class="paralx-position">
                   <li class="paralx-dots"><span class="icon-text" id="2">Accelerate</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div2" id="img2" tabindex="0"></img></li>
                   <li class="paralx-dots"><span class="icon-text" id="3">Transform</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div3" id="img3" tabindex="0"></img></li>
                   <li class="paralx-dots"><span class="icon-text" id="1">Build</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" class="Active" data-box="div1"  id="img1"  tabindex="0"><span class="icon-position"><!--<img src="images/logos/noun_build_1909132.svg" class="icon"></img></span></img>--></li>
                   <li class="paralx-dots"><span class="icon-text" id="4">Ignite</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div4" id="img4"  tabindex="0"></img></li>
                   <li class="paralx-dots"><span class="icon-text" id="5">Develop</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div5" id="img5" tabindex="0"></img></li>
                   <li class="paralx-dots"><span class="icon-text" id="6">Engineer</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div6" id="img6" tabindex="0"></img></li>
                 </ul>
               </div>

我正在使用CSS制作此动画，但存在一些问题

.paralx-dot-1:focus{
    animation-name:bright-dot;
 animation-duration:1.5s;
 height: 24.75px;
 width: 24.75px;
   outline: none;
   -webkit-animation-fill-mode: forwards; 


}
@keyframes bright-dot {
 from {transform:scale(1,1);}
 to {transform:scale(2,2);}
}

在此CSS中，动画工作正常，由于focus属性，它仅适用于选定的图像，但是当您单击其他任何位置时，动画会重置，因此我尝试使用Jquery进行相同的操作，但现在将其应用于所有选定的图像仅点击的图片

$('.paralx-dot-1').on('click', function () {
  $(this).transition({ scale: 1.5 });
});

我在Jquery中执行了相同的功能，但我只希望它仅适用于所选图像（点）
（https://ibb.co/PhCZ16f）在此图像中，您可以看到它与所有所选图像一样应该仅应用于所选图像

Answer 1

希望这就是您的期望，谢谢

$('.paralx-dot-1').on('click', function () {
  $(this).transition({ scale: 1.5 });
  $(this).parent().siblings().find('img').transition({ scale: 1 });
});

.paralx-dot-1:focus{
    animation-name:bright-dot;
    animation-duration:1.5s;
    height: 24.75px;
    width: 24.75px;
    outline: none;
   -webkit-animation-fill-mode: forwards; 
}

@keyframes bright-dot {
    from {transform:scale(1,1);};
    to {transform:scale(2,2);}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<ul class="paralx-position">
                   <li class="paralx-dots"><span class="icon-text" id="2">Accelerate</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div2" id="img2" tabindex="0"></img></li>
                   <li class="paralx-dots"><span class="icon-text" id="3">Transform</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div3" id="img3" tabindex="0"></img></li>
                   <li class="paralx-dots"><span class="icon-text" id="1">Build</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" class="Active" data-box="div1"  id="img1"  tabindex="0"><span class="icon-position"><!--<img src="images/logos/noun_build_1909132.svg" class="icon"></img></span></img>--></li>
                   <li class="paralx-dots"><span class="icon-text" id="4">Ignite</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div4" id="img4"  tabindex="0"></img></li>
                   <li class="paralx-dots"><span class="icon-text" id="5">Develop</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div5" id="img5" tabindex="0"></img></li>
                   <li class="paralx-dots"><span class="icon-text" id="6">Engineer</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div6" id="img6" tabindex="0"></img></li>
                 </ul>
               </div>

如何将功能（动画）应用于仅具有相同类名的许多类中的所选类

1 个答案: