yenta風の特定の位置までドラッグしたらフェードアウトする処理を実装する
$('.draggable').draggable({ drag: function() { var offset = $(this).offset(); var xPos = offset.left; var yPos = offset.top; if (xPos >= 210) { $('.xxx).addClass('fadeout-right').delay(700).fadeOut(1); } if (xPos <= -210) { $('.xxx).addClass('fadeout-left').delay(700).fadeOut(1); } if (yPos <= -250) { $('.xxx).addClass('fadeout-top').delay(700).fadeOut(1); } if (yPos >= 300) { $('.xxx).addClass('fadeout-bottom').delay(700).fadeOut(1); } } });
.fadeout-right { transform: rotate(30deg) scale(0.8); transition: 1s; opacity: 0; margin-left: 200px; } .fadeout-left { transform: rotate(-30deg) scale(0.8); transition: 1s; opacity: 0; margin-left: -200px; } .fadeout-top { transform: rotate(30deg) scale(0.8); transition: 1s; opacity: 0; margin-bottom: 200px; } .fadeout-bottom { transform: rotate(-30deg) scale(0.8); transition: 1s; opacity: 0; margin-bottom: -200px; }
ちなみにスマホだとブラウザのドラッグイベントが検知できないので、
jquery-ui-touch-pinch.js
のライブラリを使いました。