Question

我和班级有相同的div＆＃34; serv-foto＆＃34;和＃34;动画＆＃34;相关的跨度，我想用＆＃34; mouseover＆＃34;制作动画（类＃34;脉冲＆＃34;） div上的事件。我可以使用event.target或其他任何方法简化此代码以防止重复吗？

 $(".serv-foto-1").on("mouseover", function(event) {
 $(".animated-1").addClass('pulse').one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd", function(){
    $(".animated-1").removeClass('pulse');
  });
});

$(".serv-foto-2").on("mouseover", function(event) {
 $(".animated-2").addClass('pulse').one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd", function(){
    $(".animated-2").removeClass('pulse');
  });
});

$(".serv-foto-3").on("mouseover", function(event) {
 $(".animated-3").addClass('pulse').one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd", function(){
    $(".animated-3").removeClass('pulse');
  });
});

Answer 1

删除愚蠢的整数后缀以留下＆＃34; serv-foto＆＃34;和＃34;动画＆＃34;。

然后......

$(".serv-foto").on("mouseover", function(event) {
    $(this).find(".animated").addClass('pulse').one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd", function(){
        $(this).removeClass('pulse');
    });
});

如果需要单独选择/设置元素，请使用ID。

Answer 2

试试这个：

$(".serv-foto-1, .serv-foto-2, .serv-foto-3").on("mouseover", function(event) {
 $(".animated-1, .animated-2, .animated-3").addClass('pulse').one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd", function(){
    $(".animated-1, .animated-2, .animated-3").removeClass('pulse');
  });
});

Answer 3

One approach could be to simplify your class hooks:

$(".serv-foto").on("mouseover", function(event) {
   $(".animated").addClass('pulse').one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd", function(){
     $(".animated").removeClass('pulse');
   });
});

Your markup could still use the original numbered classes:

<div class="serv-foto serve-foto-1">
  <div class="animated animated-1">
    ...
  </div>
</div>

if you needed to keep the unique hooks to coincide with the pluse class being added to the selector, but there's really no need to keep track of all the different classes you have with the JavaScript, since they all just get the pulse class toggled on them.

Answer 4

为了使其可扩展，这样的事情可以起作用：

$('[class*=" serv-foto-"]').on("mouseover", function(event) {
  var c = this.className.slice(-1);
  $(".animated-" + c).addClass('pulse').one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd", function(){
      $(".animated-" + c).removeClass('pulse');
  });
});

Answer 5

您是否考虑过只为此动画使用CSS？根据您的DOM结构，您可以

<div class="serv-foto">
    ...
    <span class="animated"></span>
</div>

使用这个CSS：

.serv-foto:hover .animated {
    animation-name: pulse;
}

或

<div class="serv-foto"></div>
...
<span class="animated"></span>

使用这个CSS：

.serv-foto:hover ~ .animated {
    animation-name: pulse;
}

你能发布更详细的DOM片段吗？

Answer 6

使用扩展jquery 方法：

in document.ready：

＆＃13;

$.fn.extend({
    // ************* animateCss *************
    animateCss: function (animationName, funComplete) {
        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        this.addClass('animated ' + animationName).one(animationEnd, function () {
            $(this).removeClass('animated ' + animationName);
            if (typeof funComplete != "undefined")
                funComplete();
        });
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

此功能2参数，您可以使用所有项目：

animationName
funComplete：当animate完成此次运行时

$（＆＃34;元素选择器＆＃34;）。animateCss（＆＃34; animate-name＆＃34;，function（）{alert（＆＃34; end animate＆＃34;）} ）;

然后用于你的元素：

＆＃13;

$(".serv-foto-1").on("mouseover", function(event) {
   $(".animated-1").animateCss("pulse",function(){ alert("animaet-1 end!!")})
});
$(".serv-foto-2").on("mouseover", function(event) {
   $(".animated-2").animateCss("pulse")
});
$(".serv-foto-3").on("mouseover", function(event) {
   $(".animated-3").animateCss("pulse",function(){ alert("animaet-3 end!!") })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

例如＆＃34; animated-2＆＃34;没有结束功能

我可以简化这个jquery代码吗？

6 个答案: