Jquery UI Efektler( Effect )
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery UI Efektler( Effect )

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2668)
RAPOR ET
Jquery ui nin bir başka özelliği olan efectleri anlatacam bu derste.Normalde jquery nin slide ve fade efektler var ama jquery ui de bir çok efekt eklenmiş.Efektlere bakacak olursak bunlar.

fold-blind-bounce-clip-drop-explode-fade-highlight-puff-pulsate-scale-shake-slide-size-transfer

Bu efektler ne işe yarayacak derseniz bir alanı gösterip gizlemek için kullanacağız.

Kodlara geçelim.

<html>
<head>
<title>cArleone</title>
<script type="text/javascript" src="jquery-1.9.0.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.0.custom.js"></script>
<link rel="stylesheet" href="demos.css" />
<link rel="stylesheet" href="jquery-ui-1.10.0.custom.min.css" />

<script type="text/javascript">
$(function() {

$("#ac").click(function(){//aç butonuna tıklanırsa
$(".kutu").show("bounce");//kutu clasına sahip objeyi bounce efekti ile aç
});

$("#kapat").click(function(){//kapat butonuna tıklanırsa
$(".kutu").hide("bounce");//kutu efektini bounce ile kapat
});

/*fold-blind-bounce-clip-drop-explode-fade-highlight-puff-pulsate-scale-shake-slide-size-transfer*/
});
</script>
<style type="text/css">
body{font-size:17px;}
.kutu{width:250px;height:150px;background-color:red;color:#fff;text-align:center;border-radius:1em;padding:50px;box-sizing:border-box;-webkit-box-sizing:border-box; }
</style>
</head>
<body>
<button id="ac">aç</button>
<button id="kapat">kapat</button>
<div class="kutu">cArleone</div>


</body>

indir : http://ustaderslik.com/dosya/Jquery-Uİ(Efektler).rar

video:



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol