Change img on swap (three varient)

Question

I have 2 button (the unsmile and smile).
1. When i click to unsmile the img "flies" to left side.
2. When i click to smile the img is "flies" to right side.

But i need to do the following:

When i click on the img and drag it to the left, the img + description should "fly" to the left side and show a js alert - "You don't like this".

When i click on the img and drag it to right, the img + description should "fly" to the right side and show an alert - "You like this".

When i click on the img and drag it under the img, the img + description should "fly" down and show an alert - "You add this to favorite".

This should be done in javascript/html5/css. It will be compiled using intelXDK to android platform.

HTML

<div id="food"></div>

            <div id="control">

              <div class="button no">
                <a href="#" class="trigger"></a>
              </div>

              <div class="button yes">
                <a href="#" class="trigger"></a>
              </div>

            </div>

</div>

JS Code

$('a[href*=#]').click(function(){
  return false;
});


var animationEndEvent = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";

var Food = {
  wrap: $('#food'),
  selectFood: [
    {
      name: 'Hamburger',
      locaction: 'Poland, Warsaw, FoocCap',
      img: "images/photo/1.jpg"
    },
    {
      name: 'Chiness something',
      locaction: 'Poland, Warsaw, FoocKnajp',
      img: "images/photo/2.jpg"
    },
    {
      name: 'Nuggets',
      locaction: 'Japan, Tokyo, Yorazowa',
      img: "images/photo/3.jpg"
    },
    {
      name: 'Burger',
      locaction: 'Japan, Nagasaki, Nogoiau',
      img: "images/photo/4.jpg"
    },
    {
      name: 'Chicken pice',
      locaction: 'Russia, Moskow, Karmino',
      img: "images/photo/5.jpg"
    }
  ],   
  add: function(){
    var random =     this.selectFood[Math.floor(Math.random() * this.selectFood.length)];
    this.wrap.append("<div class='foodChoose'><img alt='" + random.name + "' src='" + random.img + "' /><span><strong>" + random.name + "</strong>, " + random.locaction + "</span></div>");
  }
}

var App = {
  yesButton: $('.button.yes .trigger'),
  noButton: $('.button.no .trigger'),
  blocked: false,
  like: function(liked){
    var animate = liked ? 'animateYes' : 'animateNo';
    var self = this;
    if (!this.blocked) {
      this.blocked = true;           
      $('.foodChoose').eq(0).addClass(animate).one(animationEndEvent, function() {
        $(this).remove();
        Food.add();
        self.blocked = false;
      });
    }
  }
};

App.yesButton.on('mousedown', function() {
  App.like(true);
});

App.noButton.on('mousedown', function() {
  App.like(false);
});

$(document).ready(function() {  
  Food.add();
});

CSS

@keyframes yes {
  0% {
    transform: scale(1) rotateZ(0deg);
    left: 0;
  }
  30% {
    transform: scale(1.05) rotateZ(0deg);
    left: 0;
  }
  100% {
    transform: rotateZ(45deg);
    left: 400px;
  }
}
.animateYes {
  animation-fill-mode: both;
  animation: yes 0.6s linear;
}

@keyframes no {
  0% {
    transform: rotateZ(360deg);
    right: 0;
  }
  30% {
    transform: scale(1.05) rotateZ(360deg);
    right: 0;
  }
  100% {
    transform: rotateZ(315deg);
    right: 400px;
  }
}
.animateNo {
  animation-fill-mode: both;
  animation: no 0.6s linear;
}

#control {
  position: relative;
  margin: 0 auto;
  width: 250px;
  top: -55%;
}
#control .button {
  width: 65px;
  height: 65px;
  background: #fff;
  position: absolute;
  top: 5px;
  border-radius: 50%;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

#control .button .trigger:active {
  transform: translateY(-50%) scale(0.75);
  transition: all .05s linear;
}
#control .button .trigger:before { 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  font-family: 'FontAwesome';
}
#control .no {
  left: 38px;
}
#control .no .trigger:before {
  content: "\2639";
  font-size: 40px;
  color: #c33;
}
#control .yes {
  right: 38px;
}
#control .yes .trigger:before {
  content: "\263A";
  font-size: 40px;
  color: #3b7;
}

Current working version can be found here.

Answer 1

It's beed a while since I worked with jquery- let me know if it's a bad way to handle it so I can update/delete it?

You have already implemented an animationEnd handler

var App = {
  yesButton: $('.button.yes .trigger'),
  noButton: $('.button.no .trigger'),
  blocked: false,
  like: function(liked){
    var animate = liked ? 'animateYes' : 'animateNo';
    var self = this;
    if (!this.blocked) {
      this.blocked = true;           
      $('.foodChoose').eq(0).addClass(animate).one(animationEndEvent, function() {
        $(this).remove();
        Food.add();
        self.blocked = false;
      });
    }
  }
};

just pass the required arguments to your handler, e.g.

$('.foodChoose').eq(0).addClass(animate).one(animationEndEvent, 
  function(e) {
    function(liked) {
      $(this).remove();
      alert(liked);
      Food.add();
      self.blocked = false;
    }.bind(e.target, liked);
  }
);

I'm passing the jquery custom event target here which should be identical to $('.foodChoose').eq(0) ^^ this means you will not need the original event and can remove the outer function like:

$('.foodChoose').eq(0).addClass(animate).one(animationEndEvent, 
  function(liked) {
    $(this).remove();
    alert(liked);
    Food.add();
    self.blocked = false;
  }.bind($('.foodChoose').eq(0), liked);
);

added a fiddle including the code: https://jsfiddle.net/jLugv92t/1/ - slightly modified to bind to App. Thiy way we get rid of

var self = this;