スワップの変更（3つの変形）

Question

私は2つのボタンを持っています（スマイルとスマイル）。
1. img "fly"をクリックして左側に移動します。
2.私が笑顔になるためにクリックすると、imgは右側に「飛ぶ」。

しかし、私は次のことを実行する必要があります。私は、IMGをクリックし、左にドラッグすると

、IMG +説明は左側に「飛ぶ」とJSアラートを表示する必要があります - "You don't like this"。

imgをクリックして右にドラッグすると、img +の説明が右側に飛んで、警告が表示されます（"You like this"）。

imgをクリックしてimgの下にドラッグすると、img +の説明が「フライ」して警告が表示されます。"You add this to favorite"

これはjavascript/html5/cssで行う必要があります。 intelXDKを使ってAndroidプラットフォームにコンパイルされます。

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コード

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

現在の作業バージョンを見つけることができますhere。

Answer 1

私はjqueryの仕事をしてからしばらく経っています。それを処理するのが悪い方法であれば、私はそれを更新/削除できますか？

はすでに

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; 
     }); 
    } 
    } 
}; 

ちょうどあなたのハンドラ、例えばに必要な引数を渡すanimationEndハンドラを実装しています

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

：

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

私は$('.foodChoose').eq(0) に同一である必要があり、ここでjQueryのカスタムイベントターゲットを渡している^^これはあなたが元のイベントを必要としないなど、外部関数を削除できることを意味しますコードを含むフィダルを追加：https://jsfiddle.net/jLugv92t/1/ - アプリにバインドするためにわずかに変更されました。我々は

var self = this;