jQuery घुमाएं/

Question

मैं इस फ़ंक्शन को घुमाने के लिए उपयोग करना चाहता हूं, फिर किसी विशेष बिंदु या डिग्री पर रुकें। अभी तत्व तत्व बिना रोक के घूमता है।

<script type="text/javascript"> 
    $(function() { 
     var $elie = $("#bkgimg"); 
     rotate(0); 
     function rotate(degree) { 

      // For webkit browsers: e.g. Chrome 
      $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); 
      // For Mozilla browser: e.g. Firefox 
      $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); 

      // Animate rotation with a recursive call 
      setTimeout(function() { rotate(++degree); },65); 
     } 
    }); 
    </script> 

आपकी मदद

Answer 1

, बस लाइन है कि यह एक समय में एक डिग्री घुमाता है और स्क्रिप्ट हमेशा के लिए कॉल को दूर करने के लिए धन्यवाद: यहाँ कोड है।

// Animate rotation with a recursive call 
setTimeout(function() { rotate(++degree); },65); 

फिर 45 डिग्री के लिए समारोह में वांछित मान पारित ... इस उदाहरण 45 में। animate the rotation with jQuery करने के क्रम में

$(function() { 

    var $elie = $("#bkgimg"); 
    rotate(45); 

     function rotate(degree) { 
     // For webkit browsers: e.g. Chrome 
      $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); 
     // For Mozilla browser: e.g. Firefox 
      $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); 
     } 

}); 

बदलें .animate() को .css()। हमें एनीमेशन के लिए 5 सेकंड के लिए 5000 जोड़ने की भी आवश्यकता है। और कुछ अतिरेक को दूर करने के अपने मूल कार्य को अद्यतन करने के लिए और अधिक ब्राउज़रों का समर्थन ...

$(function() { 

    var $elie = $("#bkgimg"); 
    rotate(45); 

     function rotate(degree) { 
      $elie.animate({ 
         '-webkit-transform': 'rotate(' + degree + 'deg)', 
         '-moz-transform': 'rotate(' + degree + 'deg)', 
         '-ms-transform': 'rotate(' + degree + 'deg)', 
         '-o-transform': 'rotate(' + degree + 'deg)', 
         'transform': 'rotate(' + degree + 'deg)', 
         'zoom': 1 
      }, 5000); 
     } 
}); 

संपादित करें: मानक jQuery सीएसएस एनीमेशन उपरोक्त कोड काम नहीं कर रहा है क्योंकि जाहिरा तौर पर, jQuery .animate() अभी तक CSS3 transforms समर्थन नहीं करता।

यह jQuery प्लगइन रोटेशन चेतन माना जाता है:

http://plugins.jquery.com/project/QTransform

Answer 2

यह है क्योंकि आप घुमाने के अंदर एक पुनरावर्ती कार्य हो रहा है। यह अपने आप फिर से कॉल कर रहा है:

// Animate rotation with a recursive call 
setTimeout(function() { rotate(++degree); },65); 

कि बाहर ले लो और यह रिकर्सिवली चलाने पर रखने के नहीं होंगे।

मैं भी बस के बजाय इस समारोह उपयोग करने का सुझाव होगा:

function rotate($el, degrees) { 
    $el.css({ 
    '-webkit-transform' : 'rotate('+degrees+'deg)', 
    '-moz-transform' : 'rotate('+degrees+'deg)', 
     '-ms-transform' : 'rotate('+degrees+'deg)', 
     '-o-transform' : 'rotate('+degrees+'deg)', 
      'transform' : 'rotate('+degrees+'deg)', 
       'zoom' : 1 

    }); 
} 

यह बहुत क्लीनर है और ब्राउज़रों के अधिकांश मात्रा के लिए काम करेंगे।

Answer 3

क्यों न केवल क्लिक करें, क्लिक पर टॉगल क्लास का उपयोग करें?

js:

$(this).toggleClass("up"); 

सीएसएस:

button.up { 
    -webkit-transform: rotate(180deg); 
     -moz-transform: rotate(180deg); 
     -ms-transform: rotate(180deg); 
     -o-transform: rotate(180deg); 
      transform: rotate(180deg); 
       /* IE6–IE9 */ 
       filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand'); 
       zoom: 1; 
    } 

आप भी सीएसएस को यह जोड़ सकते हैं:

button{ 
     -webkit-transition: all 500ms ease-in-out; 
     -moz-transition: all 500ms ease-in-out; 
     -o-transition: all 500ms ease-in-out; 
     -ms-transition: all 500ms ease-in-out; 
} 

जो एनीमेशन जोड़ देगा।

आप ने कहा कि यह घूमता है लेकिन कभी नहीं बंद हो जाता है:

पुनश्च ...

अपने मूल सवाल का जवाब देने। सेट टाइमआउट का उपयोग करते समय आपको यह सुनिश्चित करने की ज़रूरत है कि आपके पास ऐसी स्थिति है जो सेटटाइम को कॉल नहीं करेगी या नहीं तो यह हमेशा के लिए चली जाएगी।अपने कोड के लिए तो:

<script type="text/javascript"> 
    $(function() { 
    var $elie = $("#bkgimg"); 
    rotate(0); 
    function rotate(degree) { 

     // For webkit browsers: e.g. Chrome 
    $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); 
     // For Mozilla browser: e.g. Firefox 
    $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); 


    /* add a condition here for the extremity */ 
    if(degree < 180){ 
     // Animate rotation with a recursive call 
     setTimeout(function() { rotate(++degree); },65); 
    } 
    } 
    }); 
    </script> 

Answer 4

t = setTimeout(function() { rotate(++degree); },65); 

और clearTimeout को रोकने के लिए

clearTimeout(t); 

मैं AJAX

success:function(){ clearTimeout(t); } 

Answer 5

के साथ इस का उपयोग मैं इस समस्या का हल किसी तरह के साथ आया था। इसमें jquery और css शामिल है। यह टॉगल की तरह काम करता है लेकिन तत्वों के प्रदर्शन को टॉगल करने के बजाय यह वैकल्पिक क्लिकों पर बस अपनी गुणों को बदल देता है। Div पर क्लिक करने से यह तत्व को 180 डिग्री टैग के साथ घुमाता है और जब आप इसे फिर से क्लिक करते हैं तो टैग के साथ तत्व मूल स्थिति में वापस आता है। यदि आप एनीमेशन अवधि बदलना चाहते हैं तो बस संक्रमण-अवधि संपत्ति बदलें।

सीएसएस

#example1{ 
transition-duration:1s; 
} 

jQuery

$(document).ready(function() { var toggle = 1; 
    $('div').click(function() { 
     toggle++; 
     if ((toggle%2)==0){ 
      $('#example1').css({'transform': 'rotate(180deg)'}); 
     } 
     else{ 
      $('#example1').css({'transform': 'rotate(0deg)'}); 
     } 
    }); 

});