Bu dersimizde jquerynin rotate ve scale pluginini anlatacağım.Normalde css ile bunları animasyonlu yapaciliyoruz.Ama jquery de bunları animasyonlu şekilde kullanamıyoruz.Bazen bunları jquery ile animasyonlu şekilde yapmamız gerekebilir.O zaman bu plugini kullanabilirsiniz.
Şimdi kodlara geçelim.Öncelikle sayfamıza plugini dahil edelim.Örneğin içinde dosyayı verecem.
İndir: http://ustaderslik.com/dosya/jquery%20rotate-scale%20plugin.rar
$(".secici").animate({rotate: '360deg'},1000);
$(".secici").animate({scale: '2'},1000);
İlk kodumuz döndürme için.1 saniye içinde 360 derece dön dedik.
İkinci kodumuz büyütme için.1 saniye içinde boyutunu 2 ye katla dedik.
Kullanımı bu kadar basit.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery-animate-css-rotate-scale.js"></script>
<script type="text/javascript">
$(function(){
$('.kutu').mouseover(function(){
$(this).animate({rotate: '360deg'},2000).animate({scale: '1.5'},1000);;
});
});
</script>
<style type="text/css">
.kutu{width:200px;height:200px;background:Red;margin:auto;}
</style>
</head>
<body>
<div class="kutu"></div>
</body>
</html>
UstaDerslik
