1

我使用下面的代码来重复 CSS 转换，但它不会工作！

        for (var i=0 ; i<4 ; i++){ 
       setTimeout(function() {
        $('#top-left').css('margin', '45px 0 0 45px');
        $('#top-mid').css('margin', '45px 0 0 90px');   
        $('#top-right').css('margin', '45px 0 0 135px');
        $('#mid-right').css('margin', '90px 0 0 135px'); 
        $('#bot-right').css('margin', '135px 0 0 135px');
        $('#bot-mid').css('margin', '135px 0 0 90px');
        $('#bot-left').css('margin', '135px 0 0 45px');
        $('#mid-left').css('margin', '90px 0 0 45px');            
    }, 4500);  

        setTimeout(function() {
        $('#top-left').css('margin', '180px 0 0 180px');
        $('#top-mid').css('margin', '180px 0 0 90px');  
        $('#top-right').css('margin', '180px 0 0 0');
        $('#mid-right').css('margin', '90px 0 0 0');
        $('#bot-right').css('margin', '0 0 0 0');
        $('#bot-mid').css('margin', '0 90px 0 90px');
        $('#bot-left').css('margin', '0 180px 0 180px');
        $('#mid-left').css('margin', '90px 0 0 180px');             
    }, 9000);

    };

http://jsfiddle.net/hamidrezabstn/JCE7t/1/

4

1 回答 1

0

您可以尝试使用setInterval(). 设置一个变量（例如var count = 0;。检查它的值setInterval()，你可以在那里做 CSS 的东西。

您可以执行以下操作：

var interval;
var count = 0;

function onloadFunctions()
{
    interval = setInterval(countUp, 4500);
}

function countUp()
{
    count++;
    // CSS Stuff

    if(count == 4)
    {
        clearInterval(interval);
    }
}

检查此SO setInterval 和 clearInterval示例。

编辑：

我尝试了一些又快又脏的东西。看看这个小提琴：

var interval4500;
var interval9000;
var count4500 = 0;
var count9000 = 0;

$(function () {
    $('#top-left').click(function () {
        $(this).css('margin', '0 0 0 0');
        $('#top-mid').css('margin', '0 90px 0 90px');
        $('#top-right').css('margin', '0 180px 0 180px');
        $('#mid-right').css('margin', '90px 0 0 180px');
        $('#bot-right').css('margin', '180px 0 0 180px');
        $('#bot-mid').css('margin', '180px 0 0 90px');
        $('#bot-left').css('margin', '180px 0 0 0');
        $('#mid-left').css('margin', '90px 0 0 0');
    });
    interval4500 = setInterval(countUp4500, 4500);
    interval9000 = setInterval(countUp9000, 9000);
});

function countUp4500() {
    count4500++;
    $('#top-left').css('margin', '45px 0 0 45px');
    $('#top-mid').css('margin', '45px 0 0 90px');
    $('#top-right').css('margin', '45px 0 0 135px');
    $('#mid-right').css('margin', '90px 0 0 135px');
    $('#bot-right').css('margin', '135px 0 0 135px');
    $('#bot-mid').css('margin', '135px 0 0 90px');
    $('#bot-left').css('margin', '135px 0 0 45px');
    $('#mid-left').css('margin', '90px 0 0 45px');

    if (count4500 == 4) {
        clearInterval(interval4500);
    }
}

function countUp9000() {
    count9000++;
    $('#top-left').css('margin', '180px 0 0 180px');
    $('#top-mid').css('margin', '180px 0 0 90px');
    $('#top-right').css('margin', '180px 0 0 0');
    $('#mid-right').css('margin', '90px 0 0 0');
    $('#bot-right').css('margin', '0 0 0 0');
    $('#bot-mid').css('margin', '0 90px 0 90px');
    $('#bot-left').css('margin', '0 180px 0 180px');
    $('#mid-left').css('margin', '90px 0 0 180px');

    if (count9000 == 4) {
        clearInterval(interval9000);
    }
}
于 2013-08-18T10:16:59.540 回答