0

How to display one by one fadein element from db when using loop for ?

.........................................................................................

When i load page index.php , it's will display 40 element from db,

but i want to apply code to show one by one element fadein , How can i do that ?

use in IE7

. .

index.php

<?php
for($i=0;$i<40;$i++)
    {
    $strSQL = "SELECT * FROM products order by id desc Limit $i,1 ";
    $objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
    $objResult = mysql_fetch_array($objQuery);
    $products_img_thumbnail_path_grid[$i] = $objResult["products_img_path"];
    }
?>



<ul>
<?PHP 
for($i=0;$i<40;$i++)
    {
?>
         <li class="thumbnail" style=" list-style: none; float: left; margin: 7px; width: 80px; ">
            <div class="imgWrap" style=" float: left; height: 80px; " >
                <a href="xxxxx.php">
                    <img border="0" src="<?PHP echo $products_img_thumbnail_path_grid[$i]; ?>" width="80" height="80" style=" background-color: #fff; border: 1px solid #aaa; "/>
                </a>  
            </div>                  
        </li>
<?PHP
}
?>
</ul>
การละนา การกราง
  • 1
  • 2
  • Please specify if you are expecting a css or jquery approach, seems like the easiest would be css but your question makes me think you are expecting a jquery code – Aboca Aug 26 '14 at 12:13

2 Answers2

0

Check this answer:

Using CSS for fade-in effect on page load

Basically you want to use css3 animations to apply a fade in effect to the images

Community
  • 1
  • 1
Aboca
  • 575
  • 2
  • 9
0
var test = $('ul li');
current = 0;
test.hide();
Rotator();

function Rotator() {
    $(test[current]).fadeIn('slow').delay(5000).fadeOut('slow');
    $(test[current]).queue(function() {
        current = current < test.length - 1 ? current + 1 : 0;
        Rotator();
        $(this).dequeue();
    });
}

use above code after the ul section, hope it work for you .

Ankur Kumar
  • 435
  • 3
  • 9