Question

我使用slideToggle来显示弹出内容：

  $( "button" ).click(function() {
            $( "p" ).slideToggle( "slow" );
         });

p {
        width: 400px;
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Toggle</button>
     <p>
     This is the paragraph to end all paragraphs.  You should feel 
     <em>lucky</em> to have seen such a paragraph in your life.  
     Congratulations!
     </p>

我想显示弹出内容，从屏幕右侧显示并隐藏回来。

我如何实现这一目标？

Answer 1

将p标签内容放入div并将样式写入div。试试吧。 js中的1000表示1秒。 div会在1秒后淡出。如果需要你可以增加它

    <!doctype html>
<html lang="en">
  <head>
     <meta charset="utf-8">
     <title>slideToggle demo</title>
     <style>
     p {
        width: 400px;
     }
     .popup{
        position: absolute;
        background: #fff; 
        display: none;
        right: 0;
     }
     body{
        background:#ccc;
     }
     </style>
     <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 </head>
 <body>
     <button>Toggle</button>

     <div class="popup">
     <p>
     This is the paragraph to end all paragraphs.  You should feel 
     <em>lucky</em> to have seen such a paragraph in your life.  
     Congratulations!
     </p> 
 </div>
 <script>
     $( "button" ).click(function() { 
        $( ".popup" ).slideToggle().delay(1000).fadeOut();
     });
 </script>

Answer 2

尝试使用Animate.css

将它包含在你的头脑中。然后就像这样更新你的html和jQuery。

<强> HTML：

<button>Toggle</button>
<p class="animated slideInRight">I added these 2 classes on this Tag</p>

<强> jQuery的：

$( "button" ).click(function() {
   $( "p" ).addClass('animated slideInRight').slideToggle( "slow" );
}); // Added this .addClass('animated slideInRight')

<强> CodePen： https://codepen.io/anon/pen/oqvRXB

Answer 3

使用此

$("p").animate({width: 'toggle'});

从右侧和同一位置显示弹出窗口

3 个答案: