使用JavaScript和CSS隐藏/显示div

Question

使用JavaScript和CSS隐藏/显示div

3

I want to slowly hide or show my div . what should be the logic in script bellow .When i clicked the button,existing div hiding and another div showing. would anyone please answer.Here is my code snippet.

  function myFunction() {
    var x = document.getElementById('before-e');
    var y = document.getElementById('after-e');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        y.style.display = 'block';
        x.style.display = 'none';
    }

}

.favorites-right-before-expand {
    background-color: #5642BE;
    color: #fff;
    height: 155px;
    width: 106px;
    margin-left: -8px;
}
.matched-body {
    padding-top: 40px;
}
.per {
    margin-bottom: -8px;
}
.prog-percent {
    margin-left: 9px;
    font-size: 16px;
}
.prog-percent {
    margin-left: 9px;
    font-size: 16px;
}
.my-progress {
    height: 10px;
    margin-bottom: 0px;
    border-radius: 0px;
    margin-left: 9px;
    margin-right: 15px;
}
.favorites-right-before-expand button {
    color: #D6DA22;
    font-size: 8px;
    text-decoration: underline;
    margin-left: 2px;
    background: none;
    border-style: none;
}
.per {
    margin-bottom: -8px;
}
.prog-percent-after {
    margin-left: 21px;
    font-size: 16px;
}
.prog-percent-after {
    margin-left: 21px;
    font-size: 16px;
}
.my-progress-after {
    height: 10px;
    margin-bottom: 0px;
    border-radius: 0px;
    margin-left: 21px;
    margin-right: 42px;
}
.expand ul {
    list-style: none;
    color: #D6DA22;
    font-size: 10px;
    margin-left: -17px;
    position: relative;
    margin-top: 7px;
}
.favorites-right {
    background-color: #5642BE;
    color: #fff;
    height: 180px;
    width: 142px;
    padding-top: 13px;
}

<div class="favorites-right" style="display: none;" id="after-e">
                <div class="prog-percent-after per">80%</div>
                <div class="prog-percent-after"> MATCHED</div>
              <div class="progress my-progress-after">
                <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%">
                </div>
              </div>
               <div class="expand">
                <ul>
                  <li> You both do not smoke</li>
                  <li> You both live in Bangldesh</li>
                  <li> Ridhika seems to like photography</li>
                  <a href="#" style="color: #D6DA22;font-size: 10px;text-decoration: underline;">See more>></a>
                </ul>     
              </div>
            </div><!-- end favorites-right-->
 <div class="favorites-right-before-expand" id="before-e">
              <div class="matched-body">
                <div class="prog-percent per">80%</div>
                <div class="prog-percent"> MATCHED</div>
              <div class="progress my-progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%">
                      </div>
              </div>
              <button onclick="myFunction()" class="expand_button">Expand Categories>></button>
              </div><!--end matched-body-->
            </div><!-- end favorites-right-before-expand -->

- Rashed Hasan

通常，可以使用延迟来进行隐藏或显示，例如：jQuery("#something").hide(400);。文档 - Abhi

如果你想让它淡入淡出，也可以使用jQuery element.fadeIn(1000);来实现。 - webbm

我尝试了淡入淡出隐藏。但我需要隐藏现有的div和其中的所有内容，并用另一个新的div替换它。当我使用hide或fade In时，这并不完全起作用。 - Rashed Hasan

4个回答

0

尝试添加

(yourvariable).style.display = "block";

然后添加CSS：

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
         opacity: 1;
    }
}

那么，

.yourdiv {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s; 
}

- jgh

0

我认为你正在让自己比必要的更难。假设你正在使用jQuery，你可以轻松地执行以下操作。

function toggleDivs () {
  $('#after-e').toggle();
  $('#before-e').toggle();
}

切换函数将根据dom中元素的当前状态显示或隐藏这些元素。

- kyle

我需要隐藏现有的按钮。 - Rashed Hasan

0

您可以将以下代码添加到您的程序中，以通过CSS进行处理。

.favorites-right-before-expand {
    background-color: #5642BE;
    color: #fff;
    height: 155px;
    width: 106px;
    margin-left: -8px;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
}

- Antonio682

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Toby Mellor · Accepted Answer

如果您想要淡出一个元素，然后在动画完成后淡入另一个元素，可以将一个函数传递给.fadeOut函数的第二个参数。在这个函数中，您可以.fadeIn第二个元素。

下面是一个例子：

500是以毫秒为单位的延迟时间。

$('#first-element').fadeOut(500, function() {
    $('#second-element').fadeIn();
});

您代码中的示例。

function myFunction() {
    $('#before-e').fadeOut(500, function() {
        $('#after-e').fadeIn();
    });
}

.favorites-right-before-expand {
    background-color: #5642BE;
    color: #fff;
    height: 155px;
    width: 106px;
    margin-left: -8px;
}
.matched-body {
    padding-top: 40px;
}
.per {
    margin-bottom: -8px;
}
.prog-percent {
    margin-left: 9px;
    font-size: 16px;
}
.prog-percent {
    margin-left: 9px;
    font-size: 16px;
}
.my-progress {
    height: 10px;
    margin-bottom: 0px;
    border-radius: 0px;
    margin-left: 9px;
    margin-right: 15px;
}
.favorites-right-before-expand button {
    color: #D6DA22;
    font-size: 8px;
    text-decoration: underline;
    margin-left: 2px;
    background: none;
    border-style: none;
}
.per {
    margin-bottom: -8px;
}
.prog-percent-after {
    margin-left: 21px;
    font-size: 16px;
}
.prog-percent-after {
    margin-left: 21px;
    font-size: 16px;
}
.my-progress-after {
    height: 10px;
    margin-bottom: 0px;
    border-radius: 0px;
    margin-left: 21px;
    margin-right: 42px;
}
.expand ul {
    list-style: none;
    color: #D6DA22;
    font-size: 10px;
    margin-left: -17px;
    position: relative;
    margin-top: 7px;
}
.favorites-right {
    background-color: #5642BE;
    color: #fff;
    height: 180px;
    width: 142px;
    padding-top: 13px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="favorites-right" style="display: none;" id="after-e">
                <div class="prog-percent-after per">80%</div>
                <div class="prog-percent-after"> MATCHED</div>
              <div class="progress my-progress-after">
                <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%">
                </div>
              </div>
               <div class="expand">
                <ul>
                  <li> You both do not smoke</li>
                  <li> You both live in Bangldesh</li>
                  <li> Ridhika seems to like photography</li>
                  <a href="#" style="color: #D6DA22;font-size: 10px;text-decoration: underline;">See more>></a>
                </ul>     
              </div>
            </div><!-- end favorites-right-->
 <div class="favorites-right-before-expand" id="before-e">
              <div class="matched-body">
                <div class="prog-percent per">80%</div>
                <div class="prog-percent"> MATCHED</div>
              <div class="progress my-progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%">
                      </div>
              </div>
              <button onclick="myFunction()" class="expand_button">Expand Categories>></button>
              </div><!--end matched-body-->
            </div><!-- end favorites-right-before-expand -->