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

Question

我读过这个答案，从google.translate.TranslateElement结果修改元素，以及其他一些人，他们都在修改谷歌翻译元素的风格和加载。

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

我遇到的一个问题是，在.fadeIn div上使用google-translate是行不通的。我仍然从.goog-logo-link中得到了一些文本，在Select a Language更改为Translate之前，我看到了它。

这可能与来自myTimer的从google.translate.TranslateElement结果修改元素函数有关。但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消失为止？

小提琴手：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

是否有更有效的方法来更改. Language组合体选项的文本:首先从选择一种语言进行翻译？

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

我怎样才能让.fadeIn在上工作，以便将文本从转换到隐藏..goog徽标链接，直到整个div消失为止？

要使fadeIn正常工作，首先需要使用css设置display:none;。

这就是它看起来的样子(我已经删除了删除google链接的行，因为这违反了使用条款)

​

​

(不幸的是，堆栈片段不起作用)这就是为什么这是工作的jsFiddle链接

​

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>

​