burakdutar
Öğrenci
- Katılım
- 4 Haziran 2012
- Mesajlar
- 98
- Reaksiyon puanı
- 0
- Puanları
- 0
Ziyaret edilen web sayfalarında animasyonların oluşu,ziyaretçileri çok etkilemektedir.JQuery Framwork'u JQuery le animasyon görüntüleri geliştirmenizi sağlamaktadır ve JQuery Framework'teki en basit konulardan biridir.
Show() ve Hide() Metodları
Zamana göre görüntüleme ve saklama animasyonculuğun temel işlevleridir.Bunun için sizlere show() hide() metotları vardır.
Kod JQuery ve animasyon;
<html>
<head>
<script type="text/javascript"
src="jquery-1.7.1.min.js"></script>
<script>
$ (document).ready(function() {
$("div.k1").css({with:"80px", height:"40px",
margin:"5px", float:"left", background:"blue",
border:"5px outset"
});
$("button:first").click(function(){
$("div.k1").show();
});
$("button.eq(1)").click(function(){
$("div.k1").show("slow");
});
$("button.eq(2)").click(function(){
$(div.k1").show(5000,function(){
$("#cikti").text("5 saniye surdu);
});
$("button.eq(3)".click(function(){
$(div.k1).hide();
});
$("button.eq(4)".click(function(){
$(div.k1).hide("fast");
});
$("button.eq(3)".click(function(){
$(div.k1).hide (3000,function(){
$(#cikti").text("3 saniye surdu");
});
});
});
</script>
</head>
<body>
<button>Goster</button>
<button>Animasyonlu goster.</button>
<button>Zaman animasyonlu goster.</button>
<button>Sakla</button>
<button>Animasyonlu sakla</button>
<button>Zaman animasyonlu sakla</button>
<hr /><div id="cikti"></div><hr />
<div class="k1"></div><div class="k1"></div>
<div class="k1"></div>
</body>
</html>
Show() ve Hide() Metodları
Zamana göre görüntüleme ve saklama animasyonculuğun temel işlevleridir.Bunun için sizlere show() hide() metotları vardır.
Kod JQuery ve animasyon;
<html>
<head>
<script type="text/javascript"
src="jquery-1.7.1.min.js"></script>
<script>
$ (document).ready(function() {
$("div.k1").css({with:"80px", height:"40px",
margin:"5px", float:"left", background:"blue",
border:"5px outset"
});
$("button:first").click(function(){
$("div.k1").show();
});
$("button.eq(1)").click(function(){
$("div.k1").show("slow");
});
$("button.eq(2)").click(function(){
$(div.k1").show(5000,function(){
$("#cikti").text("5 saniye surdu);
});
$("button.eq(3)".click(function(){
$(div.k1).hide();
});
$("button.eq(4)".click(function(){
$(div.k1).hide("fast");
});
$("button.eq(3)".click(function(){
$(div.k1).hide (3000,function(){
$(#cikti").text("3 saniye surdu");
});
});
});
</script>
</head>
<body>
<button>Goster</button>
<button>Animasyonlu goster.</button>
<button>Zaman animasyonlu goster.</button>
<button>Sakla</button>
<button>Animasyonlu sakla</button>
<button>Zaman animasyonlu sakla</button>
<hr /><div id="cikti"></div><hr />
<div class="k1"></div><div class="k1"></div>
<div class="k1"></div>
</body>
</html>
