我试图获得类似于[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显然不能按照我认为的方式工作,而且代码无效。我正在寻找有关如何改进我的代码的建议,以便它能够满足我的需求。 谢谢。希望很清楚我正在尝试做什么,如果没有,我会很乐意编辑。