CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Roman Kovalchik
Roman Kovalchik

Reputation: 1

Can I simplify this jquery code?

I have identical divs with class "serv-foto" and spans related to them with class "animated", which I want to animate(class "pulse") with "mouseover" event over divs. Can I simplify this code with event.target or anything else in order to prevent duplication?

 $(".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');
  });
});

Upvotes: 0

Views: 96

Answers (6)

Roamer-1888
Roamer-1888

Reputation: 19288

Remove the silly integer suffixes to leave "serv-foto" and "animated".

Then ...

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

If the elements need to be individually selected/styled then use ids.

Upvotes: 2

Saeed Ahmadian
Saeed Ahmadian

Reputation: 1119

use Extend jquery method:

  1. in document.ready: 

$.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();
        });
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

this function 2 parameter and you can use your all project :

  • animationName

  • funComplete : when animate finished this run

    $("element-selector").animateCss("animate-name",function(){ alert("end animate") });

then use for your element :

$(".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!!") })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

for example "animated-2" have not ended function

Upvotes: 0

Vinky
Vinky

Reputation: 341

Have you considered using CSS only for this animation? Depending on your DOM structure, you could have

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

with this CSS:

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

or

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

with this CSS:

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

Could you post a more detailed snippet of your DOM?

Upvotes: 0

webbm
webbm

Reputation: 653

In the interest of making it expandable, something like this could work:

$('[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');
  });
});

Upvotes: 0

scottohara
scottohara

Reputation: 775

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.

Upvotes: 0

virat
virat

Reputation: 105

Try this:

$(".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');
  });
});

Upvotes: 0

Related Questions