Öğrendiklerimizi Birleştirelim
Örneği inceleyiniz.
Bir sonraki örnekte imaja tıklandığında imajı sağa doğru kaydıracağız ve saydamlığını %10′dan %100′e getireceğiz. Animasyon tamamlandığında imajın 3 saniye içerisinde gözden kaybolmasını sağlayacağız. Öncelikle CSS dosyamızı düzenleyelim.
#theImage
{
position: relative;
display: none;
}
Öğe, “left” özelliğinin belirtilmesinden sonra nispeten pozisyonlanmaya ihtiyaç duyar. Ayrıca görünümün de yavaşca kaybolmasını istiyoruz, öyleyse aşağıdaki şekilde kullanmamız gerekecek.
$(document).ready(function(){
$("#theImage").css("opacity", ".1");
$("#theImage").click(function()
{
$(this).animate
({left: "400px", opacity: "1"}, 3000, function()
{
$(this).fadeOut(3000);
}
);
});
});