修改 google.translate.TranslateElement.InlineLayout.VERTICAL 的输出

Question

我已阅读此答案 Modifying element from google.translate.TranslateElement results 以及其他处理修改样式和加载 Google 翻译翻译元素的内容。

与我的用法不同的是，我使用的是layout: google.translate.TranslateElement.InlineLayout.VERTICAL，而不是SIMPLE；所有其他答案都涉及SIMPLE。

我遇到的一个问题是在 google-translate div 上使用 .fadeIn 不起作用。我仍然收到来自.goog-logo-link 的文字闪现，我看到Select a Language 在它变为Translate 之前。

这可能与 Modifying element from google.translate.TranslateElement results 中的 myTimer 函数有关。但是myTimer 是我想出如何将.goog-te-combo option:first 的文本从Select a Language 更改为Translate 的唯一方法。

所以，

1. 有没有更有效的方法将.goog-te-combo option:first 的文本从Select a Language 更改为Translate？

2. 如何让.fadeIn 处理google-translate div，以便将文本从Select a Language 更改为Translate 并隐藏.goog-logo-link，直到整个div 淡入？

jsfiddle：https://jsfiddle.net/gfzcjwmv/7/

<script>
$(window).on('load', function() {
$(".goog-logo-link").empty();
$('.goog-te-gadget').html($('.goog-te-gadget').children());
$("#google-translate").fadeIn('1000');
});
</script>


<div id="google-translate">

<div id="google_translate_element"></div>

<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en', includedLanguages: 'af,ach,ak,am,ar,az,be,bem,bg,bh,bn,br',
layout: google.translate.TranslateElement.InlineLayout.VERTICAL
}, 'google_translate_element');
}
</script>

<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

</div>


<script>

$(window).on('load', function() {

function cleartimer() {     
    setTimeout(function(){ 
        window.clearInterval(myVar); 
    }, 1000);             
}
function myTimer() {
    if ($('.goog-te-combo option:first').length) {
        $('.goog-te-combo option:first').html('Translate');
        cleartimer();
    }
}
var myVar = setInterval(function(){ myTimer() }, 300); 

});

</script>

Answer 1

有没有更有效的方法来改变 .goog-te-combo 的文本 option:first from Select a Language to Translate?

看起来需要计时器，但如果等待 0 毫秒就足够了。

我怎样才能让 .fadeIn 在 google-translate div 上工作，以便 将文本从选择语言更改为翻译和隐藏 .goog-logo-link 在整个 div 淡入之前一直隐藏？

要使淡入淡出工作，您首先需要使用 css 设置 display:none;。

这就是它的样子 （我删除了删除谷歌链接的行，因为这违反了使用条款）

（不幸的是 stacksn-p 不起作用）这就是为什么here is the working jsFiddle link

function googleTranslateElementInit() {
  new google.translate.TranslateElement({
  pageLanguage: 'en', includedLanguages: 'af,ach,ak,am,ar,az,be,bem,bg,bh,bn,br,bs,ca,chr,ckb,co,crs,cs,cy,da,de,ee,el,en,eo,es,es-419,et,eu,fa,fi, fo,fr,fy,ga,gaa,gd,gl,gn,gu,ha,haw,hi,hr,ht,hu,hy,ia, id,ig,is,it,iw,ja,jw,ka,kg,kk,km,kn,ko,kri,ku,ky,la, lg,ln,lo,loz,lt,lua,lv,mfe,mg,mi,mk,ml,mn,mo,mr,ms,mt, ne,nl,nn,no,nso,ny,nyn,oc,om,or,pa,pcm,pl,ps,pt-BR, pt-PT,qu,rm,rn,ro,ru,rw,sd,sh,si,sk,sl,sn,so,sq,sr, sr-ME,st,su,sv,sw,ta,te,tg,th,ti,tk,tl,tn,to,tr,tt, tum,tw,ug,uk,ur,uz,vi,wo,xh,yi,yo,zh-CN,zh-TW,zu',
  layout: google.translate.TranslateElement.InlineLayout.VERTICAL
  }, 'google_translate_element');
}


$(window).on('load', function() {
  $('.goog-te-gadget').html($('.goog-te-gadget').children());
  $("#google-translate").fadeIn('1000');


  function cleartimer() {     
      setTimeout(function(){ 
          window.clearInterval(myVar); 
      }, 500);             
  }
  function myTimer() {
      if ($('.goog-te-combo option:first').length) {
          $('.goog-te-combo option:first').html('Translate');
          cleartimer();
      }
  }
  var myVar = setInterval(function(){ myTimer() }, 0); 

});

#google-translate {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="google-translate">
  <div id="google_translate_element"></div>
</div>