Merhaba arkadaşlar, jQuery’nin verdiği swing , linear artık güzel görünmüyor o yüzden sık kullandığım ama fırsat bulamadığım bir kod parçasını paylaşacağım.
Öncelikle yazarına teşekkür edelim : gdsmith
jquery.easing.js jQuery .animate() fonskiyonu biraz renklendirmek diyebiliriz ancak html5 de de bu animate’leri verebiliyoruz.
Js kodlarda select’den gelen veriyi çağırmak ve sürekli tetiklemek için birkaç şey yaptım kafanız karışmasın, dikkatli incelerseniz anlarsınız.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
calistir(($('.saniye').val().replace(/\D+/g,'')*1)); $('select').change(function () { $('.deneme').finish(); clearInterval(zaman); calistir(($('.saniye').val().replace(/\D+/g,'')*1)); }); $('input').keyup(function () { $('.deneme').finish(); clearInterval(zaman); calistir(($('.saniye').val().replace(/\D+/g,'')*1)); }); function calistir(saniye) { zaman = setInterval(function() { var randomEffect = $('select').val(); $('.deneme').finish(); $('.deneme').html(randomEffect); $('.deneme').animate ( { width : 600, height: 300, marginLeft :0, marginTop : 0, lineHeight : 300 }, (saniye / 2), randomEffect, function() { $('.deneme').animate ( { width : 150, height: 150, marginLeft :300, marginTop : 100, lineHeight : 150 }, (saniye / 2), randomEffect ); } ); },saniye); } |
Yarın birgün rastgele animate efekt isteyeceksiniz o yüzden dizi halinedede veriyorum efektleri
|
1 2 3 4 5 6 7 8 |
var effects = [ 'swing', 'linear', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart', 'easeInQuint', 'easeOutQuint', 'easeInOutQuint', 'easeInExpo', 'easeOutExpo', 'easeInOutExpo', 'easeInSine', 'easeOutSine', 'easeInOutSine', 'easeInCirc', 'easeOutCirc', 'easeInOutCirc', 'easeInElastic', 'easeOutElastic', 'easeOutElastic', 'easeInBack', 'easeOutBack', 'easeInOutBack', 'easeInBounce', 'easeOutBounce', 'easeInOutBounce' ]; |
Random seçtirme
|
1 |
effects[Math.floor( ( Math.random() * ( effects.length ) ) + 1 )] |
Ön izleme
See the Pen jQueryEasing ile .animate() efektleri ~ www.aycan.net by Aycan BÜLBÜL (@AycanB) on CodePen.
Aycan.net Ön izleme -> http://calismalar.aycan.net/jQueryEasing/