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:
UstaDerslik
