Jquery animasyonund STOP eklemek

26-12-2014, 12:17:33

Merhaba. Uafk bir animasyon (360 derece dönme) efekti hazırladım. Fakat istediğim olan hazırladığım imaj 360 derece bir tam tur döndükten sonra tamamen dursun.

Aşağıdaki kodlarda resim bir tam tur dönüyor ama stop etmiyor. Nereye ne yazmam lazım bir tur sonunda stop etsin.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript'>
//<![CDATA[ 
$(window).load(function(){
var rotation = function (){
   $("#image").rotate({
      angle:0, 
      animateTo:360, 
      callback: rotation
   });
}
rotation();
});
//]]>  
</script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
</head>
<body>
<img src="https://i.hizliresim.com/z2rV5R.png" id="image">
</body>
</html>

28-12-2014, 13:32:29

#2

alikarakoc93

berdos adlı üyeden alıntı: mesajı görüntüle

Merhaba. Uafk bir animasyon (360 derece dönme) efekti hazırladım. Fakat istediğim olan hazırladığım imaj 360 derece bir tam tur döndükten sonra tamamen dursun.

Aşağıdaki kodlarda resim bir tam tur dönüyor ama stop etmiyor. Nereye ne yazmam lazım bir tur sonunda stop etsin.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript'>
//<![CDATA[ 
$(window).load(function(){
var rotation = function (){
   $("#image").rotate({
      angle:0, 
      animateTo:360, 
      callback: rotation
   });
}
rotation();
});
//]]>  
</script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
</head>
<body>
<img src="https://i.hizliresim.com/z2rV5R.png" id="image">
</body>
</html>

Merhaba berdos bu iş için rotate.js kullanarak sistemi kasmana gerek olduğunu düşünmemekle beraber şu şekilde yapabileceğini düşünmekteyim.

        $(function () {
            var $donecekResim = $("#image");
            dondur(1);
            function dondur(deger) {
                $donecekResim.css({
                    WebkitTransform: 'rotate(' + deger + 'deg)'
                });
                $donecekResim.css({
                    '-moz-transform': 'rotate(' + deger + 'deg)'
                });
                if (deger < 360) {
                    timer = setTimeout(function () {
                        dondur(++deger);
                    }, 2);
                }
            }
        });

http://jsfiddle.net/bykrkc/un0t4xej/

İyi çalışmalar.

29-12-2014, 10:42:16

#3

berdos

alikarakoc93 adlı üyeden alıntı: mesajı görüntüle

Merhaba berdos bu iş için rotate.js kullanarak sistemi kasmana gerek olduğunu düşünmemekle beraber şu şekilde yapabileceğini düşünmekteyim.

        $(function () {
            var $donecekResim = $("#image");
            dondur(1);
            function dondur(deger) {
                $donecekResim.css({
                    WebkitTransform: 'rotate(' + deger + 'deg)'
                });
                $donecekResim.css({
                    '-moz-transform': 'rotate(' + deger + 'deg)'
                });
                if (deger < 360) {
                    timer = setTimeout(function () {
                        dondur(++deger);
                    }, 2);
                }
            }
        });

http://jsfiddle.net/bykrkc/un0t4xej/

İyi çalışmalar.

Çok teşekkür edityorum Ali bey. Bu da işimi görür. Sağolasın