jQuery動畫div里面的php回聲

[英]jQuery animating div inside php echo


<li>
    <a id="collection" href="collections.php">
        <span class="glyphicon glyphicon-th white"> Collections</span>
    </a>
</li>

<?php include "pagination.php" ?>

<script>
    $("#collection").click(function(){
        // i want to animate the outmost container like this, but this wont work.
        var cont = $("cont");
        cont.animate({height: '300px', opacity: '0.4'}, "slow");
        cont.animate({width: '300px', opacity: '0.8'}, "slow");
        //
    });
</script>

This is my pagination.php, which gives some echoes output :

這是我的pagination.php,它給出了一些回聲輸出:

 <?
if($result) {
        echo '<div class="containerCollection" id="cont">';
        while($row = mysqli_fetch_array ($result)) {    
            echo '<div style="float:left" class="divEntry">';
            echo "<div align='center' class='nameEntry'>".$row['name']."</div>";
            echo '<div align="center"><img src="'.$row['image'].'" class="imageEntry"/></div>'; 
            echo "<div align='center' class='priceEntry'>".$row['price']."</div>";
            echo "<div class='descEntry'>".$row['description']."</div>";
            echo '</div>';
        }
        echo "<div class='text-center' style='clear:both'>";
        echo "<ul class='pagination'>";
        echo $links;
        echo '</ul>';
        echo '</div>';
        echo '</div>';
}}?>

How to call the pagination.php which gives echoes, but only show it when collections button is clicked?

如何調用給出回聲的pagination.php,但只在點擊集合按鈕時顯示它?

I think this is not ajax since we load the php first and hide it somewhere?

我認為這不是ajax,因為我們首先加載php並將其隱藏在某個地方?

1 个解决方案

#1


1  

Your cont selector is wrong, it should be $('#cont');

您的連續選擇器是錯誤的,它應該是$('#cont');

Hide your content div : <div class="containerCollection" id="cont" style="display:none">

隱藏你的內容div:

Then make it appear in your click function :

然后讓它出現在你的點擊功能中:

      $("#collection").click(function(){
        // i want to animate the outmost container like this, but this wont work.
        var cont = $("#cont");
        cont.show()
            .animate({height: '300px', opacity: '0.4'}, "slow")
            .animate({width: '300px', opacity: '0.8'}, "slow");
        //
      });

(Also your double animate is strange, you should check best practices)

(另外你的雙重動畫很奇怪,你應該檢查最佳實踐)


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2015/11/17/1992c636acfde7ec803d9ffdb3026c4a.html



 
  © 2014-2022 ITdaan.com 联系我们: