2010-09-18 34 views
7

: Bu güzelYazma geri arama fonksiyonları

$('#current_image').fadeOut(function(){ 
     $('#current_image').attr('src',newImage).show(); 
    }); 

fadeOut tamamlandığında, iç içe biraz yürütür.

Burada kendi işlevimi yapmak istiyorum fadeOut yerini alacak. Bu kodun çalışması için işlevim neye benziyordu?

$('#current_image').customFadeOut(function(){ 
     $('#current_image').attr('src',newImage).show(); 
    }); 

cevap

3

anahtarı sadece tanımlamak prototypal yönteme fonksiyon referans geçen ve bu dahili kullanımı $.animate ya da her türlü jquery animasyon fonksiyonu fonksiyonu geçti bağlayıcıdır.

HTML:

<div id="blah" style="color:#fff; opacity:1; background:black; height:50px; position:relative; ">fsdljfdsjfds</div> 
<a id="click" href="#">fjsd</a> 

JS:

$.fn.customFadeOut = function (callback) { 
    return $(this).animate({ 
     opacity: 0.25, 
     fontSize: "3em", 
     height: 'toggle' 
    }, 5000, function() { 
     callback.apply(this) 
    }); 

} 

$('#click').click(function() { 
    $('#blah').customFadeOut(function() { 
     alert('hi') 

    }) 

})​ 

Live Demo

+1

Can değil "function() {callback.apply (this);}" "geri" ile değiştirilir? –

+0

Evet, ancak belki de 'geriçağırım'a ek olarak tüm' customFadeOut'lar için genel işlevsellik olması gerekir, bu nedenle bu yöntem daha esnek ancak daha açıktır. Daha fazla yeteneğin gösterilmesinin özünden daha iyi olduğunu düşünüyorum. Ayrıca, birisi 'customFadeOut' işlevsiz olarak çağırırsa ne olur? Sonra başarısız olur ve JS'yi bilmeyen ve/veya bir argümanı beslemek zorunda olduğunuzu bilmek için API'leri düzgün okumayan birçok jQuery noobs'un nasıl olduğunu bilirsiniz: p –