Question

我试图从“标题”和“内容”中获得结果，一次显示一个，然后在循环中淡入和淡出下一个结果。目前，它一次显示所有结果，淡入淡出然后显示所有结果。关于如何让他们一次展示一个TIA的想法

<html>
    <head>
    <style>
        #table1{/*table aspects and design */
        border:1px solid #FFFFFF;
        background:#FFFFFF;
        display:none;
        width: 60%;
        margin-left: auto;
        margin-right: auto;
    }

    th{/*align table headers*/
        text-align:center;
    }
    td,th{
        border:1px solid #FFFFFF;
        text-align:center;
    }
</style>
</head>

 <table id="table1" cellpadding="5" cellspacing="1" width="50%">
    <? if ($query=$pdo->prepare("SELECT * FROM `Announcements_Current`"))
     {
/* select all information from the table and take it into the page  */
    $query->execute(); 
    while ($result = $query->fetch(PDO::FETCH_ASSOC)){
        $head = $result['headline'];/*puts result of headline from table into variable*/
        $content = $result['content'];
        /*puts result of content from  table into variable*/
        echo /* echo the table to display announcements*/'
        <tr>
            <th>
                <h1>
                    '.$head.'
                </h1>
            </th>
        </tr>
        <tr>
            <td>
                <font size="4">
                '.$content.'
            </font>
        </td>
    </tr>';

 }
}
?>
</table> <!--end of table-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
/* define script for jquery*/
for (var i = 0; i < 500; i++) {/* for loop to fade in and out the announcements*/

$(document).ready(function() {/*function to fade table in and out*/
$('#table1').fadeIn(2000);
$('#table1').delay(5000);
$('#table1').fadeOut(2000);
}  
)};
</script>

Answer 1

您需要在Javascript中使用计时器分别显示每一行。

$(document).ready(function() {
    var cur_row = 0;
    setInterval(function() {
        $("#table1 tr").fadeOut(2000).eq(cur_row).fadeIn(2000);
        cur_row = (cur_row + 1) % $("table1 tr").length;
    }, 5000);
});

Mysql结果显示在php循环中

1 个答案: