Question

我正在为网站构建一些实时搜索功能。一切工作正常，但我希望能够对结果div进行动画处理。因此，当div被填充时，给div一个过渡。现在，一切都变得非常突然。

<div class='search-result-container'>           
    // for loop here: 
    <div class="search-result">
        <a href="<?php echo esc_url( post_permalink() ); ?>">   
            <div class="inner-search-result">
                <h2><?php the_title();?></h2>
                <img src="<?php echo get_the_post_thumbnail_url( $ID, 'full' ); ?>">
            </div>
        </a>    
    </div>
    // end of for loop
</div>

搜索结果容器实际上是在扩展大小的类。搜索结果类实际上处于for循环中，以将所有帖子写入页面。我想为此需要更多的JavaScript，但我从未真正使用过JavaScript动画。有什么想法吗？

Answer 1

您可以使用jQuery

首先需要验证div是否为空：

  function divEmpty( el ){
      return !$.trim(el.html())
  }
  if (divEmpty($('.search-result-container'))) {
      // console.log('its empty nothing happens')
  } 

  else { 
  //do animation
  }

动画的语法如下：

$(selector).animate({params},speed,callback);

您可以搜索消失的动画并将其添加到// do animation区域

添加内容时对div进行动画处理

1 个答案: