• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 342
  • Last Modified:

Reveal items sequentially

Hi,

I would like to show images on this page sequentially  using the jquery ui show function, at present I am doing this:

           $(function(){
                var i = 0;
                for(i=1;i<=84;i++){
                   show(i); 
                }
            
                function show(item){
                    console.log (item+" no");
                   setTimeout(function(){ $('div#pic'+item).show('explode','','900'),1000})
                }    
            
            
            })

Open in new window


But this does not seem to work, think I need to put in a callback?

can anyone offer a way of solving this?
0
darren-w-
Asked:
darren-w-
  • 4
  • 4
1 Solution
 
Michel PlungjanIT ExpertCommented:
You are setting off a set of setTimeouts which are not waiting for the item to load, the loop that starts them is finished in milliseconds so the setTimeouts would theoretically execute in 1 second, 1 second and 0.001 second, 1 second and 0.002 seconds and so on.


I think you want something like

function show(item){
  console.log (item+" no");
  setTimeout(function(){ $('div#pic'+item).show('explode','','900'),1000*item})
}    

0
 
darren-w-Author Commented:
Humm tried that and it still reveals than all at once?
0
 
Michel PlungjanIT ExpertCommented:
Can you show a few lines of your html?

I am wondering why you have
div#pic and not just #pic
0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

 
darren-w-Author Commented:
The grid is dynamically created using php

                <?php
                $pic = 1;
                foreach (range('A', 'G') as $r) {
                    echo "<div class='wrapper'>\n";
                    for ($c = 1; $c <= 12; $c++) {
                        echo "<div id ='pic$pic' class='left$c'></div> \n";
                        $pic++;
                    }

                    echo"</div>";
                }
                ?>

Open in new window


each div element is: <div id='pic[number]' class='left[anothernumber]'></div>

so one row is:

                <div class='wrapper'>
<div id ='pic1' class='left1'></div> 
<div id ='pic2' class='left2'></div> 
<div id ='pic3' class='left3'></div> 
<div id ='pic4' class='left4'></div> 
<div id ='pic5' class='left5'></div> 
<div id ='pic6' class='left6'></div> 
<div id ='pic7' class='left7'></div> 
<div id ='pic8' class='left8'></div> 
<div id ='pic9' class='left9'></div> 
<div id ='pic10' class='left10'></div> 
<div id ='pic11' class='left11'></div> 
<div id ='pic12' class='left12'></div> 
</div><div class='wrapper'>

Open in new window

css behind:

.left1{
   position: relative;
   float: left;
   left: 5px;
   width: 230px;
   height: 230px;
   background-color: #828282
}
....



div[id*='pic']{
        background: url("image/n11lmc_noao.jpg") no-repeat 0 0;
visibility: hidden;
}

....

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
You put the delay inside the function
0
 
darren-w-Author Commented:
Yes, like in 37272178?
0
 
Michel PlungjanIT ExpertCommented:
Here you go

var tId = [];
for(var i=1;i<=10;i++){      
  var delay = i*1500;
  (function(i){  
      tId[i] = window.setTimeout(function() {
          console.log(i+':'+delay);  
        $('div#pic'+i).show('explode','','900');
      }, delay);
  })(i);
}

Open in new window


Demo here: http://jsfiddle.net/mplungjan/Ymjsk/
0
 
darren-w-Author Commented:
cool !

Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now