.slide从底部向上移动而不是从顶部向下移动

时间:2016-01-08 15:37:08

标签: javascript jquery html css slidetoggle

所以我试图在单个网页上显示隐私政策。该链接位于页脚中,隐私策略位于显示屏上:无上面的div。我试图让内容div从页脚底部向上滑动,推动其上方的所有内容。

HTML

 <section  id="privContent" class="spotlight">
     <div  class="content">
         <h2>Privacy Policy</h2>
         <p>Lorem Ipsum</p>
     </div>
 </section>

 <section  class="spotlight">
     <div class="content">
         <a target="self" class="privClick">Privacy Policy</a>
     </div>
 </section>

JS

$(function () {
   $('a[target="self"]').click(function(e) {
        e.preventDefault();
   $('#privContent').slideToggle('2000', "swing");
   });

});

我尝试了几件不同的事情,但似乎无法发挥作用。我对jQuery缺乏经验

1 个答案:

答案 0 :(得分:1)

新片段:

&#13;
&#13;
$(function () {
  $('#privContent').hide();
  $('.privClick').click(function(e) {
    $('#privContent').css('position', 'fixed').css('bottom', '0').slideToggle('2000', "swing").delay(2000).queue(function (next) {
      $(this).slideToggle('2000', "swing");
      next();
    });;
  });
});
&#13;
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>



<section  id="privContent" class="spotlight">
    <div  class="content">
        <h2>Privacy Policy</h2>
        <p>Lorem Ipsum</p>
    </div>
</section>

<section  class="spotlight">
    <div class="content">
        <a href="#" target="blank">TDI</a> | <p class="privClick">Privacy Policy</p>
    </div>
</section>
&#13;
&#13;
&#13;