每次单击标志图像时如何获得淡入效果？

如何解决每次单击标志图像时如何获得淡入效果？

我已经发布了一个小的“国际”报价脚本，显示了荷兰语，英语，德语和法语的报价。每天都会显示不同的报价。草稿结果（尚有一些工作要做）可以在the following page ...

的右上角看到

到目前为止，我使用的代码如下：

<style>
.flag { width: 48px; height: 29px; margin-right: 7px; margin-bottom: 10px; cursor: pointer; }
.bild { width: 100%; align: justify !important; margin-bottom: 10px; }

.fade-in {
  animation: fadeIn ease 10s;
  -webkit-animation: fadeIn ease 10s;
  -moz-animation: fadeIn ease 10s;
  -o-animation: fadeIn ease 10s;
  -ms-animation: fadeIn ease 10s;
}
@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
}
</style>

<script>
function myFunction1() { document.getElementById("myframe").src = 
"https://www.aeternus.org/linski_spr/view_spr_NL 2020-09-24.PHP"; }
function myFunction2() { document.getElementById("myframe").src = 
"https://www.aeternus.org/linski_spr/view_spr_EN 2020-09-24.PHP"; }
function myFunction3() { document.getElementById("myframe").src = 
"https://www.aeternus.org/linski_spr/view_spr_DE 2020-09-24.PHP"; }
function myFunction4() { document.getElementById("myframe").src = 
"https://www.aeternus.org/linski_spr/view_spr_FR 2020-09-24.PHP"; }
</script>

<img onclick="myFunction1()" class="flag" src="https://www.aeternus.org/nl.png" />
<img onclick="myFunction2()" class="flag" src="https://www.aeternus.org/uk.png" />
<img onclick="myFunction3()" class="flag" src="https://www.aeternus.org/de.png" />
<img onclick="myFunction4()" class="flag" src="https://www.aeternus.org/fr.png" />

<div class="fade-in" ><iframe id="myframe" width="100%" height="150" 
src="https://www.aeternus.org/linski_spr/view_spr_NL 2020-09-24.PHP" frameborder="0" scrolling="no" >

还有一个具有相同脚本can be found here ...的codepen

页面加载后，您会看到淡入淡出效果已经开始完成。但是，当此后单击其他标志时，文本将立即更改，而不会出现淡入。我希望每次单击其中一个标志时都执行淡入效果。

这怎么办？任何建议高度赞赏。

解决方法

我解决了这个问题。以下代码可以解决问题。做出的其他过程：

我添加了一个额外的功能来使脚本也可以在页面加载时工作。

我添加了一些额外的CSS，以在单击标志时实现某种淡入。

<style>
.manquo {
   text-align: center; 
   margin-bottom: 3px;
   font-size: 120%;
   font-weight: bold;
   color: #BC401E;
}
.stretch { display: flex; }
.stretch img { flex:1; margin:5px; /* need some space ?*/ }
.flag { width: 40px; height: 30px; margin-right: 0px; margin-bottom: 6px; cursor: pointer; border: 3px solid #5A5A5A; border-radius: 5px; }
.fade-in {
  animation: fadeIn ease 5s;
  -webkit-animation: fadeIn ease 5s;
  -moz-animation: fadeIn ease 5s;
  -o-animation: fadeIn ease 5s;
  -ms-animation: fadeIn ease 5s;
}

@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
}
</style>



<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">

// this function decides which quote is shown on page load //
$("document").ready(function() {
      setTimeout(function() {
        $("#img1").trigger('click');
      },5);
    });

$(function(){
    $('#img1').click(function(){ 
        if(!$('#iframe1').length) {
                $('#iframeHolder').html('<iframe id="iframe1" class="fade-in" src="https://www.aeternus.org/linski_spr/view_spr_DE 2020-09-24.php" width="100%" height="130" frameborder="0" scrolling="no" ></iframe>');
        }
    });   
});
$(function(){
    $('#img2').click(function(){ 
        if(!$('#iframe2').length) {
                $('#iframeHolder').html('<iframe id="iframe2" class="fade-in" src="https://www.aeternus.org/linski_spr/view_spr_EN 2020-09-24.php" width="100%" height="130" frameborder="0" scrolling="no" ></iframe>');
        }
    });   
});
$(function(){
    $('#img3').click(function(){ 
        if(!$('#iframe3').length) {
                $('#iframeHolder').html('<iframe id="iframe3" class="fade-in" src="https://www.aeternus.org/linski_spr/view_spr_NL 2020-09-24.php" width="100%" height="130" frameborder="0" scrolling="no" ></iframe>');
        }
    });   
});
$(function(){
    $('#img4').click(function(){ 
        if(!$('#iframe4').length) {
                $('#iframeHolder').html('<iframe id="iframe4" class="fade-in" src="https://www.aeternus.org/linski_spr/view_spr_FR 2020-09-24.php" width="100%" height="130" frameborder="0" scrolling="no" ></iframe>');
        }
    });   
});
</script>

<div class="manquo">Management Quotes</div>
<div class="stretch">
<img id="img1" class="flag" src="https://www.aeternus.org/M-DE.jpg" />
<img id="img2" class="flag" src="https://www.aeternus.org/M-UK.jpg" />
<img id="img3" class="flag" src="https://www.aeternus.org/M-NL.jpg" />
<img id="img4" class="flag" src="https://www.aeternus.org/M-FR.jpg" />
</div>
<div id="iframeHolder"></div>

可以找到via this link ...

2020-09-27：更新的代码笔：现在，在每次单击同一标志多次时，将显示一个新报价。 Fiddle can be found here ...