javascript – jQuery动画div里面的回声

2023年8月16日 237次阅读 
<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>

这是我的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>';
}}?>

如何调用pagination.php给出回声,但只在点击集合按钮时显示？

我认为这不是ajax,因为我们首先加载php并将其隐藏在某个地方？

最佳答案 您的连续选择器是错误的,它应该是$(‘#cont’);

隐藏您的内容div：< div class =“containerCollection”id =“cont”style =“display：none”>

然后让它出现在你的点击功能中：

      $("#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");
        //
      });

(另外你的双重动画很奇怪,你应该检查最佳实践)

点赞