{"id":165,"date":"2012-10-13T17:18:47","date_gmt":"2012-10-13T14:18:47","guid":{"rendered":"http:\/\/ulviercan.com\/teknoblog\/?p=165"},"modified":"2015-01-05T19:05:23","modified_gmt":"2015-01-05T16:05:23","slug":"jquery-ve-animasyonlar-effects","status":"publish","type":"post","link":"https:\/\/www.ulviercan.com\/teknoblog\/jquery\/jquery-ve-animasyonlar-effects\/","title":{"rendered":"JQuery ve Animasyonlar (Effects)"},"content":{"rendered":"<p><a href=\"https:\/\/ulviercan.com\/teknoblog\/wp-content\/uploads\/2012\/10\/animasyonlar.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-166\" title=\"animasyonlar\" src=\"https:\/\/ulviercan.com\/teknoblog\/wp-content\/uploads\/2012\/10\/animasyonlar.png\" alt=\"\" width=\"450\" height=\"100\" srcset=\"https:\/\/www.ulviercan.com\/teknoblog\/wp-content\/uploads\/2012\/10\/animasyonlar.png 450w, https:\/\/www.ulviercan.com\/teknoblog\/wp-content\/uploads\/2012\/10\/animasyonlar-300x67.png 300w, https:\/\/www.ulviercan.com\/teknoblog\/wp-content\/uploads\/2012\/10\/animasyonlar-248x55.png 248w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a><\/p>\n<p>\u00d6ncelikle herkese yeniden merhabalar. Yo\u011fun temponun aras\u0131nda g\u00fcnlerin nas\u0131l ge\u00e7ti\u011fini anlayam\u0131yoruz bile. Yeni bir makale ile daha kar\u015f\u0131n\u0131zday\u0131m.<\/p>\n<p>JQuery, ilk yaz\u0131mda da bahsetti\u011fim gibi bir hazine. Bu hazinenin bir par\u00e7as\u0131 da, k\u00fct\u00fcphaneye g\u00f6m\u00fcl\u00fc olarak gelen ve web sayfalar\u0131nda s\u0131k\u00e7a kullanma ihtiyac\u0131 duydu\u011fumuz animasyonlar. Bu makalemizde bahsetti\u011fim animasyonlar\u0131n kullan\u0131mlar\u0131ndan bahsedece\u011fim. G\u00fcn\u00fcn ba\u015fl\u0131klar\u0131n\u0131 k\u0131saca listelemek gerekirse:<\/p>\n<p><!--more--><\/p>\n<div class=\"alignleft\"><!--Ads2--><\/div>\n<div class=\"clear\"><\/div>\n<ol>\n<li>.hide() \/\u00a0.show()<\/li>\n<li>.toggle()<\/li>\n<li>.fadeIn() \/\u00a0.fadeOut()<\/li>\n<li>.fadeTo()<\/li>\n<li>.fadeToggle()<\/li>\n<li>.slideDown() \/ .slideUp()<\/li>\n<li>.slideToggle()<\/li>\n<li>.animate()<\/li>\n<li>.queue()<\/li>\n<li>.dequeue()<\/li>\n<li>.clearQueue()<\/li>\n<li>.delay()<\/li>\n<li>.stop()<\/li>\n<li>.jQuery.fx.interval()<\/li>\n<li>.jQuery.fx.off()<\/li>\n<\/ol>\n<h1>Hide \/ Show<\/h1>\n<h3>.hide( duration [, callback] ) \/\u00a0.show( duration [, callback] )<\/h3>\n<ul>\n<li>Duration: Varsay\u0131lan De\u011fer: 400. Atanabilecek de\u011ferler: [&#8216;fast&#8217;, &#8216;slow&#8217;, herhangi bir integer de\u011fer]<\/li>\n<li>Callback: Animasyon tamamland\u0131\u011f\u0131nda \u00e7a\u011fr\u0131lacak fonksiyon.<\/li>\n<\/ul>\n<p>.hide(): Se\u00e7ilen elementlerin gizlenmesini sa\u011flar. Direkt .hide() olarak da kullan\u0131labilir. Bu kullan\u0131m sonucunda herhangi bir animasyon olmadan direkt gizleme i\u015flemi yap\u0131lacakt\u0131r.<\/p>\n<p>.show(): Se\u00e7ilen elementlerin g\u00f6sterilmesini sa\u011flar. Direkt .show() olarak da kullan\u0131labilir. Bu kullan\u0131m sonucunda herhangi bir animasyon olmadan direkt gizleme i\u015flemi yap\u0131lacakt\u0131r.<\/p>\n<p>\u00d6rnek uygulama -&gt;\u00a0<a href=\"https:\/\/jsfiddle.net\/icntfan\/sfCRb\/\" target=\"_blank\">https:\/\/jsfiddle.net\/icntfan\/sfCRb\/<\/a><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;script\u00a0src=&quot;https:\/\/code.jquery.com\/jquery-latest.js&quot;&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;a\u00a0href=&quot;#&quot;&gt;Bana t\u0131kla&lt;\/a&gt;\r\n&lt;p&gt;Bana da t\u0131kla&lt;\/p&gt;\r\n&lt;button&gt;Kay\u0131plar\u0131 g\u00f6ster :)&lt;\/button&gt;\r\n&lt;script&gt;\r\n$(&quot;a&quot;).click(function ( event ) {\r\nevent.preventDefault(); \/\/ sayfada ba\u015fka fonksiyonlar\u0131n \u00e7al\u0131\u015fmas\u0131n\u0131 \u00f6nl\u00fcyoruz\r\n$(this).hide();\r\n});\r\n\r\n$(&quot;p&quot;).click(function ( event ){\r\n$(this).hide('slow'); \r\n});\r\n\r\n$(&quot;button&quot;).click(function ( event ) {\r\n$(&quot;a&quot;).show();\r\n$(&quot;p&quot;).show('slow');\r\n});\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>\u00d6rne\u011fimizde de g\u00f6rebilece\u011finiz \u00fczere, hide() ve show() fonksiyonlar\u0131na parametre(slow,fast,200,400,600) ge\u00e7irdi\u011fimiz zaman animasyonlu olarak i\u015flem yaparlar.<\/p>\n<h1>Toggle<\/h1>\n<h3>.toggle( [duration] [, callback] )<\/h3>\n<ul>\n<li>Duration: Varsay\u0131lan De\u011fer: 400. Atanabilecek de\u011ferler: [&#8216;fast&#8217;, &#8216;slow&#8217;, herhangi bir integer de\u011fer]<\/li>\n<li>Callback: Animasyon tamamland\u0131\u011f\u0131nda \u00e7a\u011fr\u0131lacak fonksiyon.<\/li>\n<\/ul>\n<p>Se\u00e7ilen elementleri g\u00f6sterir veya gizler.<\/p>\n<p>\u00d6rnek uygulama -&gt;\u00a0<a href=\"https:\/\/jsfiddle.net\/icntfan\/kbBH2\/\" target=\"_blank\">https:\/\/jsfiddle.net\/icntfan\/kbBH2\/<\/a><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n  &lt;script src=&quot;https:\/\/code.jquery.com\/jquery-latest.js&quot;&gt;&lt;\/script&gt;\r\n  &lt;style&gt;\r\ndiv { background:#ebebeb;\r\nfont-weight:bold;\r\nfont-size:16px;\r\nwidth: 300px;      }\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;button id=&quot;button1&quot;&gt;Toggle&lt;\/button&gt;\r\n&lt;p&gt;Merhaba&lt;\/p&gt;\r\n&lt;p style=&quot;display: none&quot;&gt;Ho\u015f\u00e7akal&lt;\/p&gt;\r\n    &lt;hr \/&gt;\r\n&lt;button id=&quot;button2&quot;&gt;Toggle&lt;\/button&gt;\r\n    &lt;div&gt;Selam g\u00fczel div&lt;\/div&gt;&lt;br \/&gt;\r\n    &lt;div&gt;Ba\u015fka g\u00fczel bir div&lt;\/div&gt;\r\n&lt;script&gt;\r\n\r\n$(&quot;#button1&quot;).click(function () {\r\n$(&quot;p&quot;).toggle();\r\n});\r\n    \r\n\r\n$(&quot;#button2&quot;).click(function () {\r\n$(&quot;div&quot;).toggle(&quot;slow&quot;);\r\n}); \r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\u200b\r\n<\/pre>\n<p>&#8220;Ho\u015f\u00e7akal&#8221; yazan paragraf varsay\u0131lan olarak gizli oldu\u011fu i\u00e7in, toggle sonras\u0131 kullan\u0131c\u0131ya g\u00f6sterilirken, &#8220;Merhaba&#8221; yazan paragraf gizleniyor.<\/p>\n<h1>Fade In \/ Fade Out<\/h1>\n<h3>.fadeIn( [duration] [, callback] ) \/\u00a0.fadeOut( [duration] [, callback] )<\/h3>\n<ul>\n<li>Duration: Varsay\u0131lan De\u011fer: 400. Atanabilecek de\u011ferler: [&#8216;fast&#8217;, &#8216;slow&#8217;, herhangi bir integer de\u011fer]<\/li>\n<li>Callback: Animasyon tamamland\u0131\u011f\u0131nda \u00e7a\u011fr\u0131lacak fonksiyon.<\/li>\n<\/ul>\n<p>.fadeIn(): Se\u00e7ilen elementlerin yava\u015f yava\u015f saydaml\u0131\u011f\u0131n\u0131 azaltarak g\u00f6sterilmesini sa\u011flar.<br \/>\n.fadeOut():\u00a0Se\u00e7ilen elementlerin solarak saydamla\u015fmas\u0131n\u0131 sa\u011flar.<\/p>\n<p>\u00d6rnek uygulama -&gt;\u00a0<a href=\"https:\/\/jsfiddle.net\/icntfan\/ck8pw\/\" target=\"_blank\">https:\/\/jsfiddle.net\/icntfan\/ck8pw\/<\/a><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;style&gt;\r\ndiv { margin:3px; width:50px; height:50px; background-color:red; }\r\n&lt;\/style&gt;\r\n&lt;script src=&quot;https:\/\/code.jquery.com\/jquery-latest.js&quot;&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;button id=&quot;out&quot;&gt;Fade Out&lt;\/button&gt;\r\n&lt;button id=&quot;in&quot;&gt;Fade In&lt;\/button&gt;\r\n&lt;div&gt;&lt;\/div&gt;\r\n&lt;script&gt;\r\n$(&quot;button#out&quot;).click(function () {\r\n$(&quot;div&quot;).fadeOut();\r\n});\r\n$(&quot;button#in&quot;).click(function () {\r\n$(&quot;div&quot;).fadeIn();\r\n});\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<h1>Fade To<\/h1>\n<h3>.fadeTo( duration, opacity [, callback] )<\/h3>\n<ul>\n<li>Duration: Varsay\u0131lan De\u011fer: 400. Atanabilecek de\u011ferler: [&#8216;fast&#8217;, &#8216;slow&#8217;, herhangi bir integer de\u011fer]<\/li>\n<li>Opacity: Ge\u00e7i\u015f yap\u0131lacak saydaml\u0131k de\u011feri<\/li>\n<li>Callback: Animasyon tamamland\u0131\u011f\u0131nda \u00e7a\u011fr\u0131lacak fonksiyon.<\/li>\n<\/ul>\n<p>Se\u00e7ilen elementlerin belirlenen saydaml\u0131\u011fa solarak\/belirerek ge\u00e7mesini sa\u011flar.<\/p>\n<p>\u00d6rnek uygulama -&gt;\u00a0<a href=\"https:\/\/jsfiddle.net\/icntfan\/KSZq7\/\" target=\"_blank\">https:\/\/jsfiddle.net\/icntfan\/KSZq7\/<\/a><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;script\u00a0src=&quot;https:\/\/code.jquery.com\/jquery-latest.js&quot;&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;p&gt;\r\n&#x5B;T\u0131klay\u0131n\u0131z] Bu yaz\u0131 fade olabilir\r\n&lt;\/p&gt;\r\n\r\n&lt;p&gt;\r\n&#x5B;T\u0131klay\u0131n\u0131z] Bu yaz\u0131 fade olmaz\r\n&lt;\/p&gt;\r\n&lt;script&gt;\r\n$(&quot;p:first&quot;).click(function () {\r\n$(this).fadeTo(&quot;slow&quot;, 0.33);\r\n});\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>2. paragraf\u0131n\u0131n neden fade olmad\u0131\u011f\u0131n\u0131 a\u00e7\u0131klamak istiyorum. $(&#8220;p:first&#8221;) ile sayfadaki t\u00fcm &lt;p&gt; elementlerinden ilkini (&#8220;:first&#8221;) se\u00e7ti\u011fimi belirtiyorum. Bu y\u00fczden 2. paragraf bu animasyondan etkilenmiyor. \u00d6nceki makalemde Se\u00e7ici (Selector) konusunda verdi\u011fim <a href=\"https:\/\/api.jquery.com\/category\/selectors\/\" target=\"_blank\">linki<\/a> incelemenizi ve yine \u00f6nceki makalemde <a target=\"_blank\" href=\"https:\/\/ulviercan.com\/teknoblog\/jquery\/genel-bakis-jquery-ve-veri-tipleri\/\">JQuery<\/a> alt ba\u015fl\u0131\u011f\u0131na bir g\u00f6z gezdirmenizi \u00f6neriyorum. <\/p>\n<h1>Fade Toggle<\/h1>\n<h3>.fadeToggle( [duration] [, easing] [, callback] )<\/h3>\n<ul>\n<li>Duration: Varsay\u0131lan De\u011fer: 400. Atanabilecek de\u011ferler: [&#8216;fast&#8217;, &#8216;slow&#8217;, herhangi bir integer de\u011fer]<\/li>\n<li>Easing: Animasyon esnas\u0131nda hangi easing fonksiyonun kullan\u0131laca\u011f\u0131n\u0131 belirler. (Easing jQuery&#8217;de \u00e7al\u0131\u015fan bir eklentidir. \u0130\u00e7inde farkl\u0131 bir \u00e7ok g\u00f6rsel animasyon bulundurur. Detayl\u0131 bilgi i\u00e7in <a href=\"https:\/\/www.learningjquery.com\/2009\/02\/quick-tip-add-easing-to-your-animations\" target=\"_blank\">t\u0131klay\u0131n\u0131z<\/a>)<\/li>\n<li>Callback: Animasyon tamamland\u0131\u011f\u0131nda \u00e7a\u011fr\u0131lacak fonksiyon.<\/li>\n<\/ul>\n<p>En basit olarak anlatacak olursak, Fade In ve Fade Out i\u015flemlerini s\u0131ras\u0131yla uygular.<\/p>\n<p>\u00d6rnek uygulama -&gt; <a target=\"_blank\" href=\"https:\/\/jsfiddle.net\/icntfan\/Uwrgw\/\">https:\/\/jsfiddle.net\/icntfan\/Uwrgw\/<\/a><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;script\u00a0src=&quot;https:\/\/code.jquery.com\/jquery-latest.js&quot;&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;button&gt;fadeToggle button&lt;\/button&gt;\r\n&lt;p&gt;Bu paragraf yava\u015f ve lineer bir \u015fekilde kaybolacak, ikinci t\u0131lamada belirecek.&lt;\/p&gt;\r\n\r\n&lt;script&gt;\r\n$(&quot;button:first&quot;).click(function() {\r\n$(&quot;p:first&quot;).fadeToggle(&quot;slow&quot;, &quot;linear&quot;);\r\n});\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<h1>Slide Down \/ Slide Up<\/h1>\n<h3>.slideDown( [duration] [, callback] ) \/ .slideUp( [duration] [, callback] )<\/h3>\n<ul>\n<li>Duration: Varsay\u0131lan De\u011fer: 400. Atanabilecek de\u011ferler: [&#8216;fast&#8217;, &#8216;slow&#8217;, herhangi bir integer de\u011fer]<\/li>\n<li>Callback: Animasyon tamamland\u0131\u011f\u0131nda \u00e7a\u011fr\u0131lacak fonksiyon.<\/li>\n<\/ul>\n<p>.slideDown(): Se\u00e7ilen elementi kayan animasyon ile g\u00f6sterir.<br \/>\n.slideUp(): Se\u00e7ilen elementi kayan animasyon ile gizler.<\/p>\n<p>\u00d6rnek uygulama -&gt;\u00a0<a href=\"https:\/\/jsfiddle.net\/icntfan\/ZwdnW\/\" target=\"_blank\">https:\/\/jsfiddle.net\/icntfan\/ZwdnW\/<\/a><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n  &lt;script src=&quot;https:\/\/code.jquery.com\/jquery-latest.js&quot;&gt;&lt;\/script&gt;\r\n\r\n   &lt;style&gt;\r\n   div { margin:3px; width: 100px; height: 150px; background-color: red; display: none; }\r\n   &lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n    &lt;button id=&quot;slidedown&quot;&gt;.slideDown()&lt;\/button&gt;\r\n    &lt;button id=&quot;slideup&quot;&gt;.slideUp()&lt;\/button&gt;\r\n    &lt;div&gt;&lt;\/div&gt;\r\n&lt;script&gt;\r\n$('#slidedown').click(function() {\r\n  $('div').slideDown('slow'); \/\/ Hi\u00e7 parametre girmeseydik orta h\u0131zda yani 400 milisaniyede i\u015flem yap\u0131lacakt\u0131.\r\n});\r\n\r\n$('#slideup').click(function() {\r\n  $('div').slideUp('slow');\r\n});\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<h1>Slide Toggle<\/h1>\n<h3>.slideToggle( [duration] [, callback] )<\/h3>\n<ul>\n<li>Duration: Varsay\u0131lan De\u011fer: 400. Atanabilecek de\u011ferler: [&#8216;fast&#8217;, &#8216;slow&#8217;, herhangi bir integer de\u011fer]<\/li>\n<li>Callback: Animasyon tamamland\u0131\u011f\u0131nda \u00e7a\u011fr\u0131lacak fonksiyon.<\/li>\n<\/ul>\n<p>En basit haliyle \u00f6zetleyecek olursa .slideDown() ve .slideUp() fonksiyonlar\u0131 aras\u0131nda ge\u00e7i\u015f yapar.<\/p>\n<p>\u00d6rnek uygulama -&gt;\u00a0<a href=\"https:\/\/jsfiddle.net\/icntfan\/ShxbR\/\" target=\"_blank\">https:\/\/jsfiddle.net\/icntfan\/ShxbR\/<\/a><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n  &lt;style&gt;\r\n  p { width:400px; }\r\n  &lt;\/style&gt;\r\n  &lt;script src=&quot;https:\/\/code.jquery.com\/jquery-latest.js&quot;&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;button&gt;Toggle&lt;\/button&gt;\r\n\r\n  &lt;p&gt;\r\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec lacus libero, in tempor est. Nam dictum consectetur rutrum. Aliquam rhoncus accumsan dictum. Aenean scelerisque feugiat pellentesque. Curabitur at felis et lectus placerat suscipit ac id orci. Duis ac orci non leo dapibus vulputate eu imperdiet urna. Ut rutrum neque sed nulla dapibus vel porta risus tristique. Aenean eros turpis, adipiscing at faucibus semper, tincidunt vitae augue. Vestibulum gravida orci ac nulla tincidunt in lobortis urna dignissim. Cras posuere commodo urna, nec molestie sem vehicula ut. Sed non posuere lacus. Cras et lacinia libero.\r\n  &lt;\/p&gt;\r\n&lt;script&gt;\r\n    $(&quot;button&quot;).click(function () {\r\n      $(&quot;p&quot;).slideToggle(&quot;slow&quot;);\r\n    });\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<h1>Animate<\/h1>\n<h3>.animate( properties [, duration] [, easing] [, complete] )<\/h3>\n<ul>\n<li>Properties: Animasyon sonunda elde edece\u011fimiz CSS \u00f6zelliklerini belirler.<\/li>\n<li>Duration: \u00a0Animasyonun s\u00fcresini belirler. Varsay\u0131lan De\u011fer: 400. Atanabilecek de\u011ferler: [&#8216;fast&#8217;, &#8216;slow&#8217;, 200,400,600, herhangi bir integer de\u011fer]. 600 Milisaniye slow de\u011ferine denk geliyor.<\/li>\n<li>Easing: Animasyon esnas\u0131nda hangi easing fonksiyonun kullan\u0131laca\u011f\u0131n\u0131 belirler.<\/li>\n<li>Complete: Animasyon tamamland\u0131\u011f\u0131nda \u00a0yap\u0131lacak i\u015fler i\u00e7in kullan\u0131l\u0131r.<\/li>\n<\/ul>\n<p>JQuery .animate() metodu se\u00e7ilen DOM elementin t\u00fcm say\u0131sal CSS \u00f6zelliklerini de\u011fi\u015ftirmemizi sa\u011flar. Metodumuzun .css() metodundan fark\u0131 ise yap\u0131lan bu i\u015flemi belirli bir s\u00fcre i\u00e7erisinde ger\u00e7ekle\u015ftirmesidir. Di\u011fer metot .css() ise istenen de\u011fi\u015fikli\u011fi DOM elemente an\u0131nda uygulamas\u0131d\u0131r. Metodumuz .animate()&#8217;in kullan\u0131m yelpazesi \u00e7ok geni\u015ftir. Fikir olmas\u0131 bak\u0131m\u0131ndan bunlardan baz\u0131lar\u0131n\u0131 payla\u015fmak istiyorum.<br \/>\n\u00d6rnek uygulama -&gt;\u00a0<a href=\"https:\/\/jsfiddle.net\/icntfan\/CcTMQ\/\" target=\"_blank\">https:\/\/jsfiddle.net\/icntfan\/CcTMQ\/<\/a><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;style&gt;\r\ndiv {\r\nbackground:#ebebeb;\r\nwidth:220px;\r\nborder:2px dotted black;\r\n}\r\n&lt;\/style&gt;\r\n&lt;script\u00a0src=&quot;https:\/\/code.jquery.com\/jquery-latest.js&quot;&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;button\u00a0id=&quot;calistir&quot;&gt;\u00c7al\u0131\u015ft\u0131r&lt;\/button&gt;\r\n&lt;div\u00a0id=&quot;bolum&quot;&gt;Selam!&lt;\/div&gt;\r\n&lt;script&gt;\r\n$(&quot;#calistir&quot;).click(function(){\r\n$(&quot;#bolum&quot;).animate({\r\nwidth: &quot;50%&quot;,\r\nopacity: 0.6,\r\nmarginLeft: &quot;0.8in&quot;,\r\nfontSize: &quot;2em&quot;,\r\nborderWidth: &quot;12px&quot;\r\n}, 1500 );\r\n});\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Animate fonksiyonunda, g\u00f6rd\u00fc\u011f\u00fcm\u00fcz gibi bir \u00e7ok CSS de\u011feri ayn\u0131 anda animasyonlu olarak de\u011fi\u015ftirilebiliyor. Bu fonksiyonu kullan\u0131rken dikkat edece\u011fimiz nokta, de\u011ferlerin say\u0131sal de\u011ferler olmas\u0131d\u0131r. \u00d6rne\u011fin &#8220;background-color:#ebebeb&#8221; \u00e7al\u0131\u015fmayacakt\u0131r.<\/p>\n<h1>Queue<\/h1>\n<h3>.queue( [queueName] )<\/h3>\n<ul>\n<li>QueueName: Kuyruk ad\u0131n\u0131 belirleyen string bir ifadedir. Varsay\u0131lan olarak fx ge\u00e7erlidir.<\/li>\n<\/ul>\n<p>\u00d6rnek uygulama -&gt;\u00a0<a href=\"https:\/\/jsfiddle.net\/icntfan\/TK53y\/\" target=\"_blank\">https:\/\/jsfiddle.net\/icntfan\/TK53y\/<\/a><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n  &lt;style&gt;div { margin:3px; width:40px; height:40px;\r\n        position:absolute; left:0px; top:60px;\r\n        background:green; display:none; }\r\n  div.newcolor { background:blue; }\r\n  p { color:red; }  &lt;\/style&gt;\r\n  &lt;script src=&quot;https:\/\/code.jquery.com\/jquery-latest.js&quot;&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n  &lt;p&gt;Kuyruktaki animasyon say\u0131s\u0131: &lt;span&gt;&lt;\/span&gt;&lt;\/p&gt;\r\n  &lt;div&gt;&lt;\/div&gt;\r\n&lt;script&gt;\r\nvar div = $(&quot;div&quot;);\r\n\r\nfunction calistir() {\r\n  div.show(&quot;slow&quot;);\r\n  div.animate({left:'+=200'},2000);\r\n  div.slideToggle(1000);\r\n  div.slideToggle(&quot;fast&quot;);\r\n  div.animate({left:'-=200'},1500);\r\n  div.hide(&quot;slow&quot;);\r\n  div.show(1200);\r\n  div.slideUp(&quot;normal&quot;, calistir);\r\n}\r\n\r\nfunction goster() {\r\n  var n = div.queue(&quot;fx&quot;);\r\n  $(&quot;span&quot;).text( n.length );\r\n  setTimeout(goster, 100);\r\n}\r\n\r\ncalistir();\r\ngoster();\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>&#8220;Calistir&#8221; fonksiyonu \u00e7al\u0131\u015ft\u0131ktan sonra, i\u00e7erisinde bulundu\u011fu 8 adet animasyonu s\u0131raya sokuyor ve her bir i\u015flemde kuyruktaki animasyon say\u0131s\u0131 bir azal\u0131yor.<\/p>\n<h1>Dequeue<\/h1>\n<h3>.dequeue( [queueName] )<\/h3>\n<ul>\n<li>queueuName: Kuyruk ad\u0131n\u0131 i\u00e7eren string ifadedir.<\/li>\n<\/ul>\n<p>Metodumuz \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda kuyrukta bulunan bir sonraki fonksiyonu siler.<\/p>\n<p>\u00d6rnek uygulama -&gt;\u00a0<a href=\"https:\/\/jsfiddle.net\/icntfan\/PBrqU\/\" target=\"_blank\">https:\/\/jsfiddle.net\/icntfan\/PBrqU\/<\/a><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;style&gt;\r\ndiv { margin:3px; width:50px; position:absolute;\r\nheight:50px; left:10px; top:30px;\r\nbackground-color:yellow; }\r\ndiv.kirmizi { background-color:red; }\r\n&lt;\/style&gt;\r\n&lt;script\u00a0src=&quot;https:\/\/code.jquery.com\/jquery-latest.js&quot;&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;button&gt;Ba\u015fla&lt;\/button&gt;\r\n&lt;div&gt;&lt;\/div&gt;\r\n&lt;script&gt;\r\n$(&quot;button&quot;).click(function () {\r\n$(&quot;div&quot;).animate({left:'+=200px'}, 2000);\r\n$(&quot;div&quot;).animate({top:'0px'}, 600);\r\n$(&quot;div&quot;).queue(function () {\r\n$(this).toggleClass(&quot;kirmizi&quot;);\r\n$(this).dequeue();\r\n});\r\n$(&quot;div&quot;).animate({left:'10px', top:'30px'}, 700);\r\n});\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<h1>Clear Queue<\/h1>\n<h3>.clearQueue( [queueName] )<\/h3>\n<ul>\n<li>queueName: Kuyru\u011fun ad\u0131n\u0131 i\u00e7eren string ifadedir. Standart animasyon kuyru\u011fu &#8220;<em>fx<\/em>&#8221; dir.<\/li>\n<\/ul>\n<p>Metodumuz \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 zaman, kuyrukta olan ve hen\u00fcz \u00e7al\u0131\u015ft\u0131r\u0131lmam\u0131\u015f animasyonlar kuyruktan silinir. Arg\u00fcmans\u0131z olarak \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 zaman standart kuyru\u011fumuz olan fx&#8217;teki \u00e7al\u0131\u015ft\u0131r\u0131lmay\u0131 bekleyen t\u00fcm animasyonlar\u0131 siler. Bu y\u00f6n\u00fcyle .stop() ile b\u00fcy\u00fck benzerlik g\u00f6sterir ancak, .stop() ile sadece animasyonlar ile \u00e7al\u0131\u015f\u0131labilirken, .clearQueue() ile kuyrukta olan t\u00fcm fonksiyonlar\u0131 silebiliriz.<br \/>\n\u00d6rnek uygulama -&gt;\u00a0<a href=\"https:\/\/jsfiddle.net\/icntfan\/MVMGY\/\" target=\"_blank\">https:\/\/jsfiddle.net\/icntfan\/MVMGY\/<\/a><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n  &lt;style&gt;\r\ndiv { margin:3px; width:40px; height:40px;\r\n    position:absolute; left:0px; top:30px;\r\n    background:green; display:none; }\r\ndiv.yenirenk { background:blue; }\r\n&lt;\/style&gt;\r\n  &lt;script src=&quot;https:\/\/code.jquery.com\/jquery-latest.js&quot;&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;button id=&quot;basla&quot;&gt;Ba\u015fla&lt;\/button&gt;\r\n&lt;button id=&quot;dur&quot;&gt;Dur&lt;\/button&gt;\r\n&lt;div&gt;&lt;\/div&gt;\r\n&lt;script&gt;\r\n$(&quot;#basla&quot;).click(function () {\r\n\r\n  var myDiv = $(&quot;div&quot;);\r\n  myDiv.show(&quot;slow&quot;);\r\n  myDiv.animate({left:'+=200'},5000);\r\n  myDiv.queue(function () {\r\n    var _this = $(this);\r\n    _this.addClass(&quot;yenirenk&quot;);\r\n    _this.dequeue();\r\n  });\r\n\r\n  myDiv.animate({left:'-=200'},1500);\r\n  myDiv.queue(function () {\r\n    var _this = $(this);\r\n    _this.removeClass(&quot;yenirenk&quot;);\r\n    _this.dequeue();\r\n  });\r\n  myDiv.slideUp();\r\n\r\n});\r\n\r\n$(&quot;#dur&quot;).click(function () {\r\n  var myDiv = $(&quot;div&quot;);\r\n  myDiv.clearQueue();\r\n  myDiv.stop();\r\n});&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<h1>Delay<\/h1>\n<h3>.delay( duration [, queueName] )<\/h3>\n<ul>\n<li>duration: Kuyrukta i\u015fletilmeyi bekleyen bir sonraki fonksiyon i\u00e7in ka\u00e7 milisaniye bekletilece\u011fini belirler.<\/li>\n<li>queueName: Gecikme i\u015fleminin uygulanaca\u011f\u0131 kuyru\u011fu belirler. Varsay\u0131lan olarak fx kullan\u0131r.<\/li>\n<\/ul>\n<p>\u00d6rnek uygulama -&gt;<a href=\"https:\/\/jsfiddle.net\/icntfan\/yHEpc\/\" target=\"_blank\">https:\/\/jsfiddle.net\/icntfan\/yHEpc\/<\/a><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;style&gt;\r\ndiv { position: absolute; width: 60px; height: 60px; float: left; }\r\n.birinci{ background-color: #3f3; left: 0;}\r\n.ikinci{ background-color: #33f; left: 80px;}\r\n&lt;\/style&gt;\r\n&lt;script\u00a0src=&quot;https:\/\/code.jquery.com\/jquery-latest.js&quot;&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;p&gt;&lt;button&gt;\u00c7al\u0131\u015ft\u0131r&lt;\/button&gt;&lt;\/p&gt;\r\n&lt;div\u00a0class=&quot;birinci&quot;&gt;&lt;\/div&gt;\r\n&lt;div\u00a0class=&quot;ikinci&quot;&gt;&lt;\/div&gt;\r\n\r\n&lt;script&gt;\r\n$(&quot;button&quot;).click(function() {\r\n$(&quot;div.birinci&quot;).slideUp(400).delay(1000).fadeIn(600);\r\n$(&quot;div.ikinci&quot;).slideUp(400).fadeIn(600);\r\n});\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<h1>Stop<\/h1>\n<h3>.stop( [clearQueue] [, jumpToEnd] )<\/h3>\n<ul>\n<li>clearQueue: Durdurulacak animasyonun kuyruktan silinip silinmeyece\u011fini belirtir. Varsay\u0131lan olarak &#8220;false&#8221; de\u011feri atanm\u0131\u015ft\u0131r.<\/li>\n<li>jumpToEnd: Y\u00fcr\u00fcrl\u00fckteki animasyonun tamamland\u0131ktan sonra m\u0131 yoksa hemen mi durdurulaca\u011f\u0131n\u0131 belirtir.<\/li>\n<\/ul>\n<p>Animasyonlar\u0131 durdurmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n<p>\u00d6rnek uygulama -&gt;\u00a0<a href=\"https:\/\/jsfiddle.net\/icntfan\/VtrYP\/\" target=\"_blank\">https:\/\/jsfiddle.net\/icntfan\/VtrYP\/<\/a><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n  &lt;style&gt;div {\r\nposition: absolute;\r\nbackground-color: #ebebeb;\r\nleft: 0px;\r\ntop:30px;\r\nwidth: 60px;\r\nheight: 60px;\r\nmargin: 5px;\r\n}\r\n&lt;\/style&gt;\r\n  &lt;script src=&quot;https:\/\/code.jquery.com\/jquery-latest.js&quot;&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;button id=&quot;ileri&quot;&gt;ileri&lt;\/button&gt;\r\n&lt;button id=&quot;dur&quot;&gt;DUR!&lt;\/button&gt;\r\n&lt;button id=&quot;geri&quot;&gt;Geri&lt;\/button&gt;\r\n&lt;div class=&quot;block&quot;&gt;&lt;\/div&gt;\r\n&lt;script&gt;\r\n\/* Start animation *\/\r\n$(&quot;#ileri&quot;).click(function(){\r\n$(&quot;.block&quot;).animate({left: '+=100px'}, 2000);\r\n});\r\n\r\n\/* Stop animation when button is clicked *\/\r\n$(&quot;#dur&quot;).click(function(){\r\n$(&quot;.block&quot;).stop();\r\n});\r\n\r\n\/* Start animation in the opposite direction *\/\r\n$(&quot;#geri&quot;).click(function(){\r\n$(&quot;.block&quot;).animate({left: '-=100px'}, 2000);\r\n});\r\n\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<h1>jQuery.fx.interval<\/h1>\n<p>Animasyonlar i\u00e7in saniyede ka\u00e7 kare oynat\u0131laca\u011f\u0131n\u0131 belirler. Varsay\u0131lan olarak 13 milisaniye belirlenmi\u015ftir. Bu de\u011feri d\u00fc\u015f\u00fcrmek daha yumu\u015fak ge\u00e7i\u015fler sa\u011flayacakt\u0131r ancak, performansa ve CPU kullan\u0131m\u0131na etkileri olacakt\u0131r.<\/p>\n<p>\u00d6rnek uygulama -&gt;\u00a0<a href=\"https:\/\/jsfiddle.net\/icntfan\/eQtV5\/\">https:\/\/jsfiddle.net\/icntfan\/eQtV5\/<\/a><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n  &lt;style&gt;\r\n    div { width:50px; height:50px; margin:5px; float:left;\r\n          background:red; }\r\n    &lt;\/style&gt;\r\n  &lt;script src=&quot;https:\/\/code.jquery.com\/jquery-latest.js&quot;&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;p&gt;&lt;input type=&quot;button&quot; value=&quot;\u00c7al\u0131\u015ft\u0131r&quot;\/&gt;&lt;\/p&gt;\r\n&lt;div&gt;&lt;\/div&gt;\r\n&lt;script&gt;\r\njQuery.fx.interval = 100;\r\n\r\n$(&quot;input&quot;).click(function(){\r\n  $(&quot;div&quot;).toggle( 3000 );\r\n});\r\n  &lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<h1>jQuery.fx.off<\/h1>\n<p>T\u00fcm animasyonlar\u0131 devre d\u0131\u015f\u0131 b\u0131rakarak, animasyonlar\u0131ndan son hallerine bir anda ge\u00e7i\u015f yapmay\u0131 sa\u011flar. 2 adet kullan\u0131m sebebi olabilir.<\/p>\n<ol>\n<li>\u00a0D\u00fc\u015f\u00fck kaynakl\u0131 (donan\u0131msal ve yaz\u0131l\u0131msal olarak) cihazlar (telefonlar gibi)<\/li>\n<li>Kullan\u0131c\u0131 animasyonlara eri\u015fim s\u0131k\u0131nt\u0131s\u0131 ya\u015f\u0131yorsa. (Daha fazla bilgi -&gt; <a href=\"https:\/\/www.jdeegan.phlegethon.org\/turn_off_animation.html\">https:\/\/www.jdeegan.phlegethon.org\/turn_off_animation.html<\/a>)<\/li>\n<\/ol>\n<div>Varsay\u0131lan olarak &#8220;true&#8221; de\u011feri atanm\u0131\u015ft\u0131r. \u0130stenen her an de\u011fer true\/false \u015feklinde de\u011fi\u015ftirilebilir.<\/div>\n<p>\u00d6rnek uygulama -&gt;\u00a0<a href=\"https:\/\/jsfiddle.net\/icntfan\/SeEfB\/\" target=\"_blank\">https:\/\/jsfiddle.net\/icntfan\/SeEfB\/<\/a><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n  &lt;style&gt;\r\n    div { width:50px; height:30px; margin:5px; float:left;\r\n          background:blue; }\r\n    &lt;\/style&gt;\r\n  &lt;script src=&quot;https:\/\/code.jquery.com\/jquery-latest.js&quot;&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;p&gt;&lt;input type=&quot;button&quot; value=&quot;\u00c7al\u0131\u015ft\u0131r&quot;\/&gt; &lt;button&gt;Toggle fx&lt;\/button&gt;&lt;\/p&gt;\r\n&lt;div&gt;&lt;\/div&gt;\r\n&lt;script&gt;\r\nvar toggleFx = function() {\r\n  $.fx.off = !$.fx.off;\r\n};\r\ntoggleFx();\r\n\r\n$(&quot;button&quot;).click(toggleFx)\r\n\r\n$(&quot;input&quot;).click(function(){\r\n  $(&quot;div&quot;).toggle(&quot;slow&quot;);\r\n});\r\n  &lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Faydalan\u0131lan kaynaklar:<br \/>\n1-) JQuery documentation -> Effects | <a href=\"https:\/\/api.jquery.com\/category\/effects\/\" target=\"_blank\">https:\/\/api.jquery.com\/category\/effects\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00d6ncelikle herkese yeniden merhabalar. Yo\u011fun temponun aras\u0131nda g\u00fcnlerin nas\u0131l ge\u00e7ti\u011fini anlayam\u0131yoruz bile. Yeni bir makale ile daha kar\u015f\u0131n\u0131zday\u0131m. JQuery, ilk yaz\u0131mda da bahsetti\u011fim gibi bir hazine. Bu hazinenin bir par\u00e7as\u0131 da, k\u00fct\u00fcphaneye g\u00f6m\u00fcl\u00fc olarak gelen ve web sayfalar\u0131nda s\u0131k\u00e7a kullanma ihtiyac\u0131 duydu\u011fumuz animasyonlar. Bu makalemizde bahsetti\u011fim animasyonlar\u0131n kullan\u0131mlar\u0131ndan bahsedece\u011fim. G\u00fcn\u00fcn [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":166,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[41,21,22,23],"class_list":["post-165","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-javascript","tag-jquery-2","tag-jquery-animasyonlar","tag-jquery-effects"],"_links":{"self":[{"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/posts\/165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/comments?post=165"}],"version-history":[{"count":46,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/posts\/165\/revisions"}],"predecessor-version":[{"id":699,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/posts\/165\/revisions\/699"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/media\/166"}],"wp:attachment":[{"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/media?parent=165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/categories?post=165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/tags?post=165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}