Question

slideDown（）动画无法使用position：fixed div 如何一起使用？有可能吗？

我的css：

.ham{
  position: fixed; 
  top: 50px; 
  left: 0; 
  z-index: 100;

  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
  background-color: rgb(210,10,10);
  display: none;
}

我的Js

$(function()
        {

             $( "#hb" ).click(function() {
                console.log("toggle");
                    $("#ham").slideDown("slow");
                    $("#hb").fadeOut();
                    $("#cb").fadeIn();
                 return false;
             }); 

             $( "#cb" ).click(function() {
                console.log("toggle");
                    $("#ham").slideUp("slow");
                    $("#hb").fadeIn();
                    $("#cb").fadeOut();
                 return false;
             }); 
        });

HTML

<body>
    <div class="ham" id="ham">


    </div>
    <a href="#" id="hb"><span class="glyphicon glyphicon-menu-hamburger back_button"></span></a>
    <a href="#" id="cb" style="display: none"><span class="glyphicon glyphicon-remove back_button"></span></a>
    .
    .
    .
    .
    </body>

slideDown（）动画无法使用position：fixed div 如何一起使用？有可能吗？

Answer 1

您可以使用setInterval制作自己的动画，并使用固定元素逐个像素地移动

variable=curret div position top;

setInterval(function()
  {

   $("#fixedelement").css("top",""variable);
   variable = variable+nuber of pixel you want to move;
  },10);

到达您想要的位置后，您将清除间隔并停止功能

Answer 2

简单的CSS和JS上的小调整就可以解决问题。

<强> CSS

.ham{
    position: fixed; 
    top: 50px; 
    left: 0; 
    z-index: 100;

    /* Preserve aspet ratio */
    min-width: 100%;
    background-color: rgb(210,10,10);
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: all 500ms;
}
.opened {
    overflow: auto;
    min-height: 100%;
    visibility: visible;
    opacity: 1;
}

<强> JS

$(function()
{
    $( "#hb" ).click(function() {
        console.log("toggle");
        $("#ham").addClass("opened");
        $("#hb").fadeOut();
        $("#cb").fadeIn();
        return false;
    }); 

    $( "#cb" ).click(function() {
        console.log("toggle");
        $("#ham").removeClass("opened");
        $("#hb").fadeIn();
        $("#cb").fadeOut();
        return false;
    }); 
});

https://jsfiddle.net/u5zavnxm/

如何使用职位：固定;和slideDown（）在一起

2 个答案: