时间戳

首页 > 解决方案 > 如何将使用函数（动画）仅应用于具有相同类名的许多类中的选定类

jquery - 如何将使用函数（动画）仅应用于具有相同类名的许多类中的选定类

问题描述

 <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中，动画工作正常，由于焦点属性，它只适用于选定的图像，但是当你点击其他任何地方时动画会重置，所以我用Jquery尝试了同样的方法，但现在它适用于所有选定的图像，只有点击的图像

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

我用 Jquery 做了同样的功能，但我希望它只适用于这张图片中的选定图像（点）
（https://ibb.co/PhCZ16f）你可以看到它适用于所有选定的图像，因为它应该适用仅选择图像

标签： jquery

解决方案

希望这是你所期待的，谢谢

$('.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>

推荐阅读