JQuery animate() Background Position Problemi

4 Aralık 2012
Bu yazıyı beğendiysen paylaşmayı unutma :)
Pin It

JQuery kütüphanesinin animate() metodunu kullanarak Background Position yapmaya çalıştığınızda gözünüz aydın nur topu gibi bir problem sizleri bekliyor. Sevindirici haber çözümsüz değil!..

Dünden beri epey vaktimi alan bu konu, DeliPenguen üzerinde yazdığım ipuçları arasında tam da yerini alacak cinsten!

Hemen senaryomuzu kuralım ve konumuza geçelim..

<div class="switch"></div>

switch” classına sahip bir div elementim var. Onun için uyguladığım CSS‘imi de şu şekilde oluşturuyorum.

.switch { background: url(dp.png); height:256px; width:174px;}

Yani sadece width/height değerleri verilmiş ve background atanmış basit bir div. Sayfamızdaki görünümü ise şu şekilde.

Bu div içerisindeki background’a pozisyonlama yapmak istediğimizde JQuery kodumuzu aşağıdaki gibi düzenleyebiliriz.

$(".switch").css({backgroundPosition: "-54px 0px"});

Sayfamızdaki görünümü ise şu şekilde oluşur.

Şenlik ise bundan sonra başlıyor. Eğer background’ın pozisyon değişimini aşağıdaki gibi animate ile yapmak istiyorsanız maalesef bu sistem çalışmıyor.

$(".switch").animate({backgroundPosition: "-54px 0px"}, 200);

Bu arada hemen belirteyim test ortamı olarak Firefox 17.0.1, Chrome 23.0.1271.95 m, Internet Explorer 8 ve JQuery 1.8.3 sürümü kullanıyorum.

Background pozisyonlamayı farklı şekilde de kullanabiliyorsunuz. Örneğin yukarıda yazdığımız kodu aşağıdaki gibi değiştirebiliriz. Bu kullanım şeklinde de görüyorum ki Chrome ve Internet Explorer’da çalıştığı halde Firefox’ta bu yazım şekli desteklenmiyor. Hal böyle olunca bu konuda hazır bir çözüm olup olmadığı yolunu araştırdım ve sonuçta bu konu ile ilgili Alexander Farkas tarafından yazılmış “jquery.bgpos.js” isimli bir kütüphaneye ulaştım.

Kodumu tekrar aşağıdaki gibi eski haline göre düzenledikten sonra bu kütüphaneyi sayfama ekledim.

$(".switch").animate({backgroundPosition: "-54px 0px"}, 200);

O da ne! Tüm tarayıcılarda gitti! İşte burası en sıkıcı bölümlerden biri oldu. Zira kütüphane içerisinde kullanılan “$.curCSS” fonksiyonu JQuery‘nin blogunda yazdığı üzere son sürümü 1.8’den itibaren deprecated yani kullanım dışı haline gelmiş. Bu yüzden yeni kullanım şekli olarak kütüphane içerisinde küçük bir değişiklik yapmak zorunda kaldım.

Kütüphaneyi bu haliyle güncelleyip tekrar test ettiğimde aynı problemin devam ettiğini görüyorum. Kütüphaneyi incelediğimde aşağıdaki satırdaki hatayı farkedip, küçük bir işlem daha yapmam gerekiyor.

if (fx.pos === 0 && typeof fx.end == 'string')

Bunun için aşağıdaki kod satırında ki “fx.pos === 0” denkliğinin -ki Javascript’e “===” operatörü denkliğin iki tarafını hem type hem de value olarak kontrol ettiğinden– aşağıdaki gibi değiştirilmesi gerekiyor.

if (fx.pos == 0 && typeof fx.end == 'string')

ya da “fx.pos == 0” eşitliğini de kaldırıp aşağıdaki gibi kullanabilirsiniz.

if (typeof fx.end == 'string')

Ancak bu sefer roller değişti! Artık Firefox ve Chrome çalışırken Internet Explorer’da aşağıdaki Javascript hatasını almaya başladım.

Resmin büyük hali için üzerine tıklayın!

Bunun sebebi ise Internet Explorer’ın background’ın başlangıç değerlerini alamamasından kaynaklanıyor. JQuery koduma son bir ek daha yapıp aşağıdaki kodu ekleyip, kullandığım div elementinin background pozisyonunu tanımlıyorum.

$(".switch").css({backgroundPosition: "0px 0px"});

Artık animasyonum sorunsuz şekilde çalışıyor!

Kütüphanenin son halini “Edited by DeliPenguen for jQuery 1.8 Compatibility” olarak buradan indirebilirsiniz.

Benzer Yazılar


DeliPenguen'i Google+'da bulun



  1. 28 Aralık 2012 - 18:39

    teşekkürler güzel paylaşım

  2. 15 Ocak 2013 - 18:40

    Güzel Anlatım Olmuş. Teşekkürler Sıra Uygulamaya Geldi 🙂

  3. 3 Şubat 2013 - 13:23

    güzel anlatım olmuş teşekkürler