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

Question

我已经阅读了这个答案 Modifying element from google.translate.TranslateElement results 以及其他关于修改样式和加载 Google Translate 翻译元素的答案。

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

我遇到的一个问题是在 google-translate div 上使用 .fadeIn 不起作用。我仍然从 .goog-logo-link 收到一闪而过的文字，在它变为 Translate.

之前我看到了 Select a Language

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

所以，

是否有更有效的方法将 .goog-te-combo option:first 的文本从 Select a Language 更改为 Translate？
如何让 .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

Is there a more efficient way to change the text of .goog-te-combo option:first from Select a Language to Translate?

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

how can I get .fadeIn to work on the google-translate div so that changing the text from Select a Language to Translate and hiding .goog-logo-link is hidden until the entire div is faded in?

要使淡入效果起作用，您首先需要将 display:none; 设置为 css。

这是它的样子 （我删除了删除 google link 的行，因为这违反了使用条款）

（不幸的是，stacksnippet 不起作用）这就是为什么 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>

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

Modifying output of google.translate.TranslateElement.InlineLayout.VERTICAL

javascript

jquery

google-translate