延迟具有相同类但不同id的多个jQuery对象

时间:2014-01-17 07:20:48

标签: javascript jquery

我试图获得类似于[this] [1]页面中所见的效果

[1]:http://imgmodels.com/results.aspx?cityID=1&catID=1&subid=1767其中每列的元素在不同时间加载。我尝试了以下方法

    function setDelay(name, modulus){
            var numberString = name.substring(2);
            var number = parseFloat(numberString);
            var delay = number%modulus * 1000;
            alert(delay);
            return delay;
     }; 
            $(document).ready(function() {
                    var visible=new Boolean(0);
                    $("h1").click(function (){
                        //alert ("you click");
                    if(visible==0) {
                            $(".imgDefault").delay(setDelay($(".imgDefault").attr('id'),$(".imgDefault").parent().parent().attr('id'))).animate(
                        {'width':'150px'
                        },1000);
                        visible = 1;
    } else {
        $(".imgDefault").animate(
                        {'width':'0px'
                        },1000);
                        visible = 0;

    }
}); //ends .click eventHandler
    });// ends document ready function
//JavaScript Document     

然后html看起来如下,我以编程方式创建各种图像(在此代码中,源代码相同,但稍后会更改)

            <?php include 'header.php';

            function imageArray($size){
                $limit = $size;
                $imagesPerRow = 6;
                echo "<div id='". $imagesPerRow ."'>";
                echo "<h1>click me</h1>";

                for($i=1; $i<=$limit; $i++) { //willCreate an image container and display the image with the width reduced to 0
                    echo ("
                    <div class='fixedWidth'>
                        <img src='001/display.png'  id='id" . $i . "' class='imgDefault' width='150' height='185' />
                    </div>
                    ");
                } //ends for
                echo "</div>";
            } //ends imageArray()
            $numberOfImages = 23;
            imageArray($numberOfImages);
            include 'footer.php'; ?>
            <script type="text/javascript" src="js/animate2.js"></script>

问题是jQuery显然不能按照我认为的方式工作,而且代码无效。我正在寻找有关如何改进我的代码的建议,以便它能够满足我的需求。 谢谢。希望很清楚我正在尝试做什么,如果没有,我会很乐意编辑。

0 个答案:

没有答案