jquery 向下滑动动画从显示:无到显示:阻止?

56lgkhnf  于 2023-10-17  发布在  jQuery
关注(0)|答案(7)|浏览(140)

有没有一种方法可以使用CSS将display:none动画化为display:block,这样隐藏的div就可以向下滑动而不是突然出现,或者我应该用另一种方法来实现这一点?

$(document).ready(function() {
    $('#box').click(function() {
        $(this).find(".hidden").toggleClass('open');
    });
});
#box {
    height:auto;
    background:#000;
    color:#fff;
    cursor:pointer;
}
.hidden {
    height:200px;
    display:none;
}
    .hidden.open {
        display:block;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box">
    Initial Content
    <div class="hidden">
        This is hidden content
    </div>
</div>

和一个JSFiddle

3phpmpom

3phpmpom1#

是的,有一个方法:http://jsfiddle.net/6C42Q/12/
通过使用CSS3过渡,并操纵高度,而不是显示属性:

.hidden {
    height: 0px;
    -webkit-transition: height 0.5s linear;
       -moz-transition: height 0.5s linear;
        -ms-transition: height 0.5s linear;
         -o-transition: height 0.5s linear;
            transition: height 0.5s linear;
}

.hidden.open {
     height: 200px;
     -webkit-transition: height 0.5s linear;
        -moz-transition: height 0.5s linear;
         -ms-transition: height 0.5s linear;
          -o-transition: height 0.5s linear;
             transition: height 0.5s linear;
}

更多信息:Slide down div on click Pure CSS?

uhry853o

uhry853o2#

既然你已经在使用jQuery了,那么最简单的方法就是使用slideDown()。http://api.jquery.com/slidedown/
还有slideToggle()。
这样你就不需要手动做所有特定于浏览器的转换css了。

n3schb8v

n3schb8v3#

我喜欢CSS过渡的想法,但它仍然非常跳跃。有时候最大高度必须设置为一个非常大的数字,因为动态内容会使过渡变得无用,因为它非常跳跃。所以,我回到jQuery,但它有自己的缺点。内联元素是跳跃的。
我发现这对我很有效:

$(this).find('.p').stop().css('display','block').hide().slideDown();

停止停止所有先前的转换。css确保它被当作一个块元素,即使它不是。hide隐藏了那个元素,但是jquery会将它作为一个block元素记住。最后,slideDown通过向下滑动来显示元素。

k97glaaz

k97glaaz4#

我们可以使用visibility: hiddenvisibility: visible而不是display: nonedisplay: block属性。使用max-height而不是hight应该保持元素具有自动高度。
请看这个例子:

function toggleSlide () {
  const div = document.querySelector('div')
  
  if (div.classList.contains('open')) {
    div.classList.remove('open')
  } else {
    div.classList.add('open')
  }
}
div {
  visibility: hidden;
  transition: visibility .5s, max-height .5s;
  max-height: 0;
  overflow: hidden;
  
  /* additional style */
  background: grey;
  color: white;
  padding: 0px 12px;
  margin-bottom: 8px;
}

div.open {
  visibility: visible;
  /* Set max-height to something bigger than the box could ever be */
  max-height: 100px;
}
<div>
  <p>First paragraph</p>
  <p>Second paragraph</p>
</div>

<button
  onclick="toggleSlide()"
>
  toggle slide
</button>
bvk5enib

bvk5enib5#


$("#yourdiv").animate({height: 'toggle'}) ;
Toggle将打开/关闭你的div,动画应该让它从下面出现。在这种情况下,您不需要特定的CSS来“隐藏”它。

yqlxgs2m

yqlxgs2m6#

我在我的React站点中为导航头做了这个解决方案。
这是常规的可见css类

.article-header {
  position: fixed;
  top: 0;
  transition: top 0.2s ease-in-out;
}

这是附加到div的类(在我的例子中滚动时)

.hidden {
  top: -50px !important;
  transition: top 0.5s ease-in-out;
 }
nxagd54h

nxagd54h7#

您也可以使用

$('#youDiv').slideDown('fast');

或者你可以告诉活动的div上升,然后被调用的div下降

$('.yourclick').click(function(e) {
       var gett = $(this).(ID);
       $('.youractiveDiv').slideUp('fast', function(){
        $('.'+gett).slideDown(300);
       });
});

差不多吧

相关问题