Question

我有一个网站，其内容使用两种本地语言，问题是所有标题均使用一种语言，我希望两种语言的标题都具有动画效果， exp：title1会显示3秒钟，然后title2会自动显示，我的意思是应该将两种不同语言的一种标题更改为两种语言。

<div class="col-md-4">
   <div class="cont">
     <h1> title 1 </h1>
     <h1> title 2 </h1>
    </div>
</div>

Answer 1

使用jQuery，您可以通过多种方式实现这一点，使用.slideUp只是其中之一。

$("#1").fadeTo(1000, 500).slideUp(500, function() {
  $("#1").slideUp(500);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4">
  <div class="cont">
    <h1 id="1"> title 1 </h1>
    <h1> title 2 </h1>
  </div>
</div>

如果您想将其应用于所有h1，则可以使用.getElementsByTagName()，但是就像我说的那样，它将应用于所有所有人。所以我仍然建议对所有人使用相同的类：）

var h1 = document.getElementsByTagName("h1");

$(h1).fadeTo(1000, 500).slideUp(500, function() {
  $(h1).slideUp(500);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4">
  <div class="cont">
    <h1> title 1 </h1>
    <h1> title 2 </h1>
  </div>
</div>

Answer 2

我编辑了一下@Melissa Skywalkz回答我想您想连续交换图像

$(document).ready(function(){


function swapImages(){

  var title1 = $('#title1'); 
  var title2 = $('#title2'); 
  if(title1.css("display") == "block")
  {
    title1.slideUp(500); //500 ms animation time 
    title2.slideDown(500);
  }
  else
  {
    title1.slideDown(500);
    title2.slideUp(500);
  }
  
}
   
setInterval(swapImages,3000); // delay between title change
});

#title1
{
  display: block;
}
#title2
{
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <h1 id="title1"> title 1 </h1>
    <h1 id="title2"> title 2 </h1>

如何以两种不同的语言拥有一个标题？

2 个答案: