Jquery Window Resize Fonksiyonu

Arkadaşlar burada jquery ile sayfamızdaki div ve diğer nesneleri gizleme gösterme işlemini çok basit bir örnekle yayınlıyorum. Kullandığımız script ile pencere boyutunu alarak sınır koyuyoruz ve bu sınırdan küçük hale gelince ikinci evreye geçen bil olay kullandım. Aşağıda anlayabilmeniz için iki ekran çıktısı koydum. Burdan da inceleyebilirsiniz.

HTML kodu:

<div class="kirmizi"></div>
<div class="yesil"></div>

CSS Stili:

.kirmizi
{
    position:absolute;
    width:70px;
    height:25px;
    left:70px;
    top:25px;
    background:red;
}
.yesil
{
    position:absolute;
    width:70px;
    height:25px;
    background:green;
}

Script İçeriği:

    $(window).resize(function(e)
                
                {
                    if ($(window).width() > 500)
                    {$(".kirmizi").hide(100,function(){$(".yesil").show();});}
                    else
                    {$(".kirmizi").show(100,function(){$(".yesil").hide();});}
                });