0
私は3枚の写真とそれぞれの写真の下に3つのボタンがあるサイトを作った。あなたがボタンをクリックすると、画像が消え、アイコンが代わります。今それは要素を直接切り替えるが、私はsomがフェードアウトしてフェードインしたいと思っている。どのように私はそれを達成することができますか？私は不透明にしようとしましたが、アニメーションが表示されると、要素ではなく消えますが、それは見えません。 Htmlのフェードアウト（および表示なし）と別の要素のフェード
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title>A&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&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);
}
をフェード作るための要素に、このCSSを適用します。代わりに 'visibility：hidden'を使用してください。 – pol
それは動作しません...アイコンは、画像をクリックしていない場合でも、サイト上のスペースを占有します。 – Adam
次に、 'transform：scale（0）'を加えてそれをアニメートしてください。要素はまだそこにありますが、スペースはかかりません。要素を選択することができないようにするには 'visibility：hidden'も使用しますが、必須ではありません。 – pol