淡出（并显示无）并淡入另一个元素

时间：2016-12-31 15:14:55

标签： javascript html css

我在每张照片下都制作了一个有三张图片和三个按钮的网站。单击按钮时，图片消失，图标取代。现在它直接切换元素，但我想让som淡出淡出。任何想法我怎么能做到这一点？我尝试了不透明度，但是当动画出现时，消失不是元素，但它是不可见的。 的 HTML 

<!DOCTYPE html>
<html lang="sv">
 <head>
  <meta charset="utf-8">
  <title>A&amp;A-design</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link type="text/css" rel="stylesheet" href="main.css">
 </head>
 <body>
  <div class="container">
    <div class="row">
   <header class="col-md-12 col-xs-12 text-center">
     <h1 class="linje-botten">A&amp;A-design</h1>
     <!--fixa någon logga här-->
     <nav class= "navbar navbar-inverse">
       <ul class="nav navbar-nav">
         <li class="bakgrund"><a href="om.html">Om oss</a></li>
         <li class="bakgrund"><a href="projekt.html">Tidigare projekt</a></li>
         <li class="bakgrund"><a href="priser.html">Priser</a></li>
         <li class="bakgrund"><a href="kontakt.html">Kontakt</a></li>
         <li class="bakgrund"><a href="hitta.html">Hitta hit</a></li>
       </ul>
     </nav>
   </header>
   <main>
         <i class="fa fa-trash col-md-4 col-xs-1 col-sm-6 big-trash" aria-hidden="true" style="display:none"></i>
         <i class="fa fa-info big-info col-md-4 col-sm-6 col-xs-12" aria-hidden="true" style="display:none"></i>
         <i class="fa fa-thumbs-o-up big-thumb col-md-4 col-sm-6 col-xs-12" aria-hidden="true" style="display:none"></i>
         <div class="col-md-4 col-sm-6 col-xs-12">
           <img src="../f%C3%B6retag/bilder/data1.jpg" alt="">
           <button class="btn btn-block btn-primary" type="button"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>Gilla</button>
           <button class="btn btn-block btn-info" type="button"><i class="fa fa-info" aria-hidden="true"></i>Info</button>
           <button class="btn btn-block btn-danger" type="button"><i class="fa fa-trash" aria-hidden="true"></i>Skicka till papperskorgen</button>
         </div>
         <i class="fa fa-trash col-md-4 col-xs-1 col-sm-6 big-trash" aria-hidden="true" style="display:none"></i>
         <i class="fa fa-info big-info col-md-4 col-sm-6 col-xs-12" aria-hidden="true" style="display:none"></i>
         <i class="fa fa-thumbs-o-up big-thumb col-md-4 col-sm-6 col-xs-12" aria-hidden="true" style="display:none"></i>
         <div class="col-md-4 col-sm-6 col-xs-12">
           <img src="../f%C3%B6retag/bilder/data2.jpg" alt="">
           <button id="button" class="btn btn-block btn-primary" type="button"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>Gilla</button>
           <button class="btn btn-block btn-info" type="button"><i class="fa fa-info" aria-hidden="true"></i>Info</button>
           <button class="btn btn-block btn-danger" type="button"><i class="fa fa-trash" aria-hidden="true"></i>Skicka till papperskorgen</button>
         </div>
         <i class="fa fa-trash col-md-4 col-xs-1 col-sm-6 big-trash" aria-hidden="true" style="display:none"></i>
         <i class="fa fa-info big-info col-md-4 col-sm-6 col-xs-12" aria-hidden="true" style="display:none"></i>
         <i class="fa fa-thumbs-o-up big-thumb col-md-4 col-sm-6 col-xs-12" aria-hidden="true" style="display:none"></i>
         <div class="col-md-4 col-sm-6 col-center col-xs-12">
           <img src="../f%C3%B6retag/bilder/data3.jpg" alt="">
           <button class="btn btn-block btn-primary" type="button"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>Gilla</button>
           <button class="btn btn-block btn-info" type="button"><i class="fa fa-info" aria-hidden="true"></i>Info</button>
           <button class="btn btn-block btn-danger" type="button"><i class="fa fa-trash" aria-hidden="true"></i>Skicka till papperskorgen</button>
         </div>
     <div class="col-md-4 col-sm-6 col-xs-12 col-sm-offset-3 col-md-offset-4" id="klocka"></div>
    </main>
    </div>
  </div>
   <script src="https://use.fontawesome.com/ab9989071e.js"></script>
   <script src="main.js"></script>
 </body>
</html>

CSS 

.col-md-4 img {
  width: 100%;
  height: auto;
}


@media (min-width:768px) and (max-width:992px) {
  .col-center {
    float: none;
    margin: 0 auto;
  }
}

.linje-botten {
  border-bottom: 3px solid black;
}

li:hover {
  background-color: #1a542b;
}

.navbar-nav {
  margin: 0px;
  font-size: 1.4em;
}
/* #1a542b #eb9822 */

.navbar-inverse .navbar-nav>li>a {
  color:white;
}

.col-sm-6 {
margin-bottom: 5px;
}

img {
  margin-bottom: 3px;
}

.navbar-inverse {
  box-shadow: #515d63 4px 4px 4px;
}

body {
  background-color: #eb9822;
}

.big-thumb, .big-info, .big-trash{
  font-size:300px!important;
  float: left;
}

@media (max-width:768px) {
.big-thumb, .big-info, .big-trash {
  font-size: 300px!important;
  float: none;
  text-align: center;
  }
}

#klocka {
  border: 5px black solid;
  font-size: 1.5em;
  color: #ff8500;
  background-color: #3e4241;
  text-align: center;
  border-radius: 4px;
}

JS 

var tumme = document.getElementsByClassName("btn-primary");

for (i=0;i<tumme.length;i++) {
tumme[i].onclick=function() {
this.parentElement.style.display='none'
this.parentElement.previousElementSibling.style.display='block';

}
};

thumbs=document.getElementsByClassName("big-thumb");
for(j=0;j<thumbs.length;j++) {
thumbs[j].addEventListener("click", function(){
this.style.display='none';
this.nextElementSibling.style.display='block';
})};

var info = document.getElementsByClassName("btn-info");

for (i=0;i<info.length;i++) {
    info[i].onclick = function() {
    this.parentElement.style.display='none';
    this.parentElement.previousElementSibling.previousElementSibling.style.display='block';
  }
};

bigInfo=document.getElementsByClassName("big-info");
for(j=0;j<bigInfo.length;j++) {
    bigInfo[j].addEventListener("click", function() {
    console.log("hej");
    this.style.display='none';
    this.nextElementSibling.nextElementSibling.style.display='block';
  })
}

var trash = document.getElementsByClassName("btn-danger")
for(i=0;i<trash.length;i++) {
  trash[i].onclick = function() {
  console.log("333");
  this.parentElement.style.display = 'none';
  this.parentElement.previousElementSibling.previousElementSibling.previousElementSibling.style.display = 'block';
    console.log(this.parentElement.previousElementSibling.previousElementSibling.previousElementSibling);
  };
}

bigTrash=document.getElementsByClassName("big-trash");
for(j=0;j<bigTrash.length;j++) {
  bigTrash[j].addEventListener("click", function() {
    this.style.display='none';
    this.nextElementSibling.nextElementSibling.nextElementSibling.style.display='block';
  })
}


document.onload = visatid();

function visatid() {
  //Datum
  var date = new Date();
  var year = date.getYear();
  if (year < 1000) {
    year += 1900;
  }
  var day = date.getDay();
  var month = date.getMonth()+1;
  var daym = date.getDate();
  var dayarray = new Array("Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag", "Söndag");
  var montharray = new Array("Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December");

  //Tiden
  var h = date.getHours();
  var m = date.getMinutes();
  var s = date.getSeconds();
    if (h===24) {
      h = 0;
    }

    if (h < 10) {
      h = "0" + h;
    }

    if (m < 10) {
      m = "0" + m;
    }

    if (s < 10) {
      s = "0" + s;
    }

  var clock = document.getElementById("klocka");
  console.log(month);
  console.log(day);
  console.log(dayarray[day-1]);
  console.log(montharray[month-1]);

  clock.innerHTML = "Hej dagens datum är "+dayarray[day-1]+" "+daym+" "+montharray[month-1]+" "+year+" och klockan är i nuläget "+h+":"+m+":"+s;
  setTimeout(visatid, 1000);
}

1 个答案:

答案 0 :(得分：0)

将不透明度0应用于要隐藏的元素，将不透明度1应用于要显示的元素。

将此css应用于元素以使其淡化

    transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
相关问题
最新问题