Question

我有这个脚本

<div id="div2">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
  <div class="bar4"></div>
  <div class="bar5"></div>
  <div class="bar6"></div>
</div>

<script>
function rotate() {
    var count = 0;
    var elem = document.getElementById('div2');
    elem.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem2.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem3.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem4.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem5.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem6.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem2.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem3.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem4.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem5.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem6.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    if (count==360) { count = 0 }
    count+=45;
    window.setTimeout(rotate, 10);
  }
</script>

与CSS结合使用可创建iOS样式加载微调器动画。我没有写剧本。如果你想看到链接在这里：

http://kilianvalkhof.com/uploads/spinners/

但我的问题是，我正在执行AJAX jQuery请求并将请求的页面注入DIV。我正在尝试在同一个DIV中显示这个动画我在页面被请求时加载页面。元素的风格，但这对此无关紧要。我只需要附上它。有人可以帮我解决这个问题吗？

Answer 1

你应该可以做这样简单的事情： http://www.jsfiddle.net/yijiang/ESnRS/3/

基本概念是在调用ajax请求时使微调器出现，然后在请求完成时将其删除。基本结构如下：

$('#btn').click(function(){ // Trigger - this can be anything really
    var t = setTimeout(spinFunc, 100); // Let the spinner spin continously
    $('#spinner').fadeIn(); // Spinner appear

    $.ajax({
        success: function(){
            $('#spinner').fadeOut(300, function(){ // Spinner disappear
                clearTimeout(t); // Stopping the animation with it
            }); 
        }
    });
});

Answer 2

<div id="div2">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
  <div class="bar4"></div>
  <div class="bar5"></div>
  <div class="bar6"></div>
</div>
<script type="text/javascript">
var timer;
function rotate() {
    var count = 0;
    var elem = document.getElementById('div2');
    elem.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem2.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem3.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem4.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem5.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem6.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem2.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem3.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem4.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem5.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem6.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    if (count==360) { count = 0 }
    count+=45;
    window.clearTimeout(timer);
    timer = window.setTimeout(rotate, 10);
  }
</script>

在执行AJAX请求时将脚本附加到DIV

2 个答案: