Currently, I have a basic circular logo that rotates 360 degrees when certain ajax functions are triggered.
While this works as intended, the rotation only occurs once after the function is triggered, and I need to reload the page for it to happen again.
How can I ensure that the rotation happens every time the spin_logo() function is activated?
ROTATION FUNCTION
function spin_logo(){
var n = 360;
$('.logo').css({
transform:'rotate('+n+'deg)',
'-ms-transform':'rotate('+n+'deg)',
'-moz-transform':'rotate('+n+'deg)',
'-o-transform':'rotate('+n+'deg)',
transition: '1s linear',
'-ms-transition':'1s linear',
'-moz-transition':'1s linear',
'-o-transition':'1s linear'
});
n+=360;
}
ROTATION USE CASE
The spin_logo() function is called right after the success function.
$(document).on('click touchstart', '.publish', function(event){
event.preventDefault();
var $this = $(this);
$.ajax({
type: "POST",
url: base_url + "post/publish",
dataType: "text",
data: {
title: $('.title').html(),
sub: $('.sub-title').html(),
txt: $('.editor').html(),
cat_str: $('#cat-drop').val(),
str: window.location.pathname.split('/').pop()
},
cache:false,
success:
function(data){
spin_logo();
$('.response-info').slideToggle(500);
$('.response-info').html(data).fadeIn(500);
setTimeout(function(){
$('.response-info').slideToggle(1000);
}, 10000);
}
});
return false;
});
Appreciate any help on this matter.