现在的位置: 首页 > 综合 > 正文

jquery queue的使用例子

2013年10月20日 ⁄ 综合 ⁄ 共 3205字 ⁄ 字号 评论关闭
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
    <script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            // test();
        });
        function test() {
            try {
                var result = '';
                var _array = new Array();

                var arrayParam = $('#hdDivSortPanel').children();

                var i = 0, j = 0;
                for (i = 1; i < arrayParam.length; i++) {
                    for (j = 0; j < arrayParam.length - i; j++) {
                        if (arrayParam[j].attributes['sequence'].value > arrayParam[j + 1].attributes['sequence'].value) {
                            var temp = arrayParam[j + 1];
                            arrayParam[j + 1] = arrayParam[j];
                            arrayParam[j] = temp;
                        }
                    }
                }

                var delay = '';
                var funStr = '';
                $.each(arrayParam, function (index, value) {

                    delay = value.attributes['beforemm'].value;

                    result += '$("#' + value.attributes['class'].value + '").delay(' + delay + ');';
                    if (delay)
                        _array.push(setTimeoutFun(delay));

                    var arrayParam1 = $("#hdDivPanel ." + value.attributes['class'].value);

                    var i = 0, j = 0;
                    for (i = 1; i < arrayParam1.length; i++) {
                        for (j = 0; j < arrayParam1.length - i; j++) {
                            if (arrayParam1[j].attributes['sequence'].value > arrayParam1[j + 1].attributes['sequence'].value) {
                                var temp = arrayParam[j + 1];
                                arrayParam1[j + 1] = arrayParam1[j];
                                arrayParam1[j] = temp;
                            }
                        }
                    }

                    $.each(arrayParam1, function (index, value) {
                        if (value.attributes['prevalue'].value) {
                            _array.push('function () { ' + value.attributes['prevalue'].value + ' }');
                            result += value.attributes['prevalue'].value;
                        }
                        _array.push(fadeoutFun(value.attributes['animationvalue'].value));
                        result += value.attributes['value'].value;
                    });

                });


                //                alert(result);
                console.log(result);
                //                eval(result);
                console.log(_array.join('\r\n'));
                test1(_array);
            }
            catch (e) {
                alert(e.message);
            }
            //            $("#t").animate({ left: 400 }).delay(4000).animate({ left: 100 });

            //            $("#t").;
        }

        function setTimeoutFun(delayparam) {
            return function () { setTimeout(callbackAnimal, delayparam); };
        }
        var i = 1;
        var callbackAnimal = function () {
            $('body').dequeue('_slideFun');

            console.log(i++);
        };

        var log = function () {
            var i = 1;
            return console.log(i++);
        }

        function test1(_array) {
            try {
                var _slideFun = new Array()

                _slideFun.push(fadeoutFun('$("#div1").fadeOut(2000,callbackAnimal);'));
                _slideFun.push(fadeoutFun('$("#div1").fadeIn(2000,callbackAnimal);'));
                _slideFun.push(fadeoutFun('$("#div2").slideUp(2000, callbackAnimal);'));

//                                _slideFun.push(fadeoutFun('$("#div1").fadeOut(2000, callbackAnimal); '));
//                               _slideFun.push(fadeoutFun('$("#div2").slideUp(2000, callbackAnimal);'));

                $('body').queue('_slideFun', _slideFun);

                callbackAnimal();
            }
            catch (e) {
                alert(e.message);
            }
        }

        function fadeoutFun(misparam) {
            return function () { eval(misparam); }
        }

    </script>
    <style type="text/css">
        .divhah
        {
            width: 100px;
            height: 200px;
            background-color: Red;
            position: absolute;
        }
    </style>
</head>
<body scroll="no">
    <div id="hdDivPanel">
        <input id="hd_div1_FadeOutClass" class="div1" type="hidden" prevalue="" value='$("#div1").fadeOut(2000);'
            name="FadeOutClass" sequence="0" animationvalue='$("#div1").fadeOut(2000,callbackAnimal());'>
        <input id="hd_div1_FadeInClass" class="div1" type="hidden" prevalue="" value='$("#div1").fadeIn(2000);'
            name="FadeInClass" sequence="1" animationvalue='$("#div1").fadeIn(2000,callbackAnimal());'>
    </div>
    <div id="hdDivSortPanel">
        <input id="hd_div1_sort" class="div1" type="hidden" beforemm="0" value="" sequence="0">
    </div>
    <div id='div1' class="divhah" onclick="test1();">
        asdfasdfasdf</br>asdfasdfasdf
    </div>
    <div id='div2' class="divhah" style="background-color: blue; top: 200px;">
        2222</br>33333
    </div>
</body>
</html>

抱歉!评论已关闭.