テキストを切り替えるHTMLがあります。これにプラスフェード効果をつけたいと思います。

下記のようなソースコードがあります。

やりたいことは、文字が切り替わるのですが、切り替わる前の文字がフェードアウトし、新しい文字がフェードインするような効果を入れたいと思います。
可能でしょうか？
知恵をご拝借したいと思います。

HTML
1<html lang="en" dir="ltr" prefix="content: http://purl.org/rss/1.0/modules/content/  dc: http://purl.org/dc/terms/  foaf: http://xmlns.com/foaf/0.1/  og: http://ogp.me/ns#  rdfs: http://www.w3.org/2000/01/rdf-schema#  schema: http://schema.org/  sioc: http://rdfs.org/sioc/ns#  sioct: http://rdfs.org/sioc/types#  skos: http://www.w3.org/2004/02/skos/core#  xsd: http://www.w3.org/2001/XMLSchema# ">
2<div class="language-switcher-language-url contextual-region block block-language block-language-blocklanguage-interface" id="block-languageswitcher" role="navigation">
3	<ul class="links">
4		<li hreflang="en" data-drupal-link-system-path="node/14" class="en is-active">English</li>
5		<li hreflang="ja" data-drupal-link-system-path="node/14" class="ja"><a href="/ja/tools" class="language-link" hreflang="ja" data-drupal-link-system-path="node/14">日本語</a></li>
6	</ul>
7</div>
8

jQuery
1	jQuery(function() {
2		setInterval(function() {
3
4			var $lang = jQuery('html').attr('lang');
5
6			var $select_01;
7			var $select_02;
8
9			if ($lang === 'en') {
10
11				$select_01 = jQuery('.language-switcher-language-url li:nth-child(1)');
12				$select_02 = jQuery('.language-switcher-language-url li:nth-child(2) a');
13
14			} else if ($lang === 'ja') {
15
16				$select_01 = jQuery('.language-switcher-language-url li:nth-child(1) a');
17				$select_02 = jQuery('.language-switcher-language-url li:nth-child(2)');
18
19			}
20
21			if ($select_01.html().indexOf('「') !== -1) {
22
23				jQuery($select_01).html('English');
24				jQuery($select_02).html('日本語');
25
26			} else {
27
28				jQuery($select_01).html('「えいご」');
29				jQuery($select_02).html('「にほんご」');
30
31			}
32		}, 3000);
33	});

azuapricot

2019/12/11 06:58

.fadeIn() .fadeOut() はためしました？

yambejp

2019/12/11 07:06

表示・非表示が動作しないですねまずはそこから

miyabi_pudding

2019/12/11 08:18

可能かどうかを回答すればよろしいでしょうか？

cheche0830

2019/12/11 09:28

cssのtransitionを使えば、アニメは可能なので、 classを作成し、切り替え時にclassのon/offをすれば、自然な切り替えが実装可能かと思います。

tiqua_nibio

2019/12/12 03:57

ありがとうございました。＞.fadeIn() .fadeOut() はためしました？もちろん、質問する前から試していました。ですが、うまい使い方がわからなかったのです。＞可能かどうかを回答すればよろしいでしょうか？うーん… 可能だったということにしましょう

行動規範の内容に同意します

回答1件

自己解決

jQuery
1			if ($select_01.html().indexOf('「') !== -1) {
2
3				jQuery($select_01).fadeOut(function() {
4					jQuery($select_01).html('English').fadeIn(1000);
5				});
6				jQuery($select_02).fadeOut(function() {
7					jQuery($select_02).html('日本語').fadeIn(1000);
8				});
9
10			} else {