Question

我有一个带有两个单独按钮的插件全屏搜索。一个按钮在我的网站标题中打开全屏搜索，另一个按钮在div中关闭全屏搜索。打开按钮与jquery动画配合正常，但关闭按钮与jquery动画配合无效。

所以我想使用jquery动画幻灯片效果关闭div。

html代码：

<div id="full-screen-search">
<button type="button" class="close" id="full-screen-search-close">X</button>
</div>

动画的jquery代码：

$("#btn_show").click(function(){
$("#full-screen-search").animate ({ width: 'show' });  
}); 

$("#full-screen-search-close").click(function(){
$("#full-screen-search").animate ({ width: 'hide' });     
});

插件的jquery代码：

     // When the document is ready...
     jQuery( document ).ready( function( $ ) {
    
// ... display the Full Screen search when:
// 1. The user focuses on a search field, or
// 2. The user clicks the Search button
$( 'form[role=search] input, form[role=search] button' ).on( 'focus, click', function( event ) {
    // Prevent the default action
    event.preventDefault();

    // Display the Full Screen Search
    $( '#full-screen-search' ).addClass( 'open' );

    // Focus on the Full Screen Search Input Field
    $( '#full-screen-search input' ).focus();
} );

// Hide the Full Screen search when the user clicks the close button
$( '#full-screen-search button.close' ).on( 'click', function( event ) {
    // Prevent the default event
    event.preventDefault();

    // Hide the Full Screen Search
    $( '#full-screen-search' ).removeClass( 'open' );
} );

 } );

Answer 1

您不能使用show和/或hide作为宽度值。宽度必须为百分比，或者为一定单位的数字（例如300px或25vw）

请注意，在下面的示例中，我们在回调中显示/隐藏按钮-即在动画完成后运行的函数。

$("#btn_show").hide();

$("#btn_show").click(function(){
  $("#full-screen-search").show().animate ({ width: '100%' }, function(){
    $("#btn_show").hide();
  });
}); 

$("#full-screen-search-close").click(function(){
  $("#full-screen-search").animate ({ width: '0px' }, function(){$("#full-screen-search").hide()}); 
  $("#btn_show").fadeIn();
});

*{position:relative;box-sizing:border-box;}
#full-screen-search{width:100%;height:80px;background:wheat;border:1px solid orange;}
#full-screen-search-close{position:absolute;top:1px;right:1px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="btn_show">click</button>
<div id="full-screen-search">
  <button type="button" class="close" id="full-screen-search-close">X</button>
</div>

我的关闭按钮不适用于jquery动画吗？

1 个答案: