Javascript 如何进行jQuery innerHTML更改的淡入淡出转换

我有下面这个简单的按钮来切换innerHTML文本。我一直在寻找一个缓慢的淡入淡出过渡的变化innerHTML点击，但没有一个好运气这样做。你能帮我解决一下我该怎么做吗

提前谢谢你的建议

var-Chg；
var Btn=document.getElementById（“变更”）；
$（“#更改”）。单击（函数（）{
Chg=！Chg；
如果（Chg）{
Btn.innerHTML=“切换”；
}否则{
Btn.innerHTML=“未切换”；
}
});

不太可能
这里有一个潜在的解决方案，它可能会根据您想要的效果而起作用


var-Chg；
$（“#更改”）。单击（函数（）{
Chg=！Chg；
var文本；
如果（Chg）{
text=“切换”；
}否则{
text=“未切换”；
}
$（this.fadeOut（“fast”，function（））{
this.innerHTML=文本；
美元（此）.fadeIn（“快速”）；
});
});

不切换
这里有一个潜在的解决方案，它可能会根据您想要的效果而起作用


var-Chg；
$（“#更改”）。单击（函数（）{
Chg=！Chg；
var文本；
如果（Chg）{
text=“切换”；
}否则{
text=“未切换”；
}
$（this.fadeOut（“fast”，function（））{
this.innerHTML=文本；
美元（此）.fadeIn（“快速”）；
});
});

未切换
$（“#更改”）。在（'click'，function（）上{
var$this=$（this）；
变量x，x1；
if（$this.attr（“数据切换”）=“0”）{
x=“span:第一个孩子”；
x1=“span:最后一个孩子”；
$this.attr（“数据切换”，“1”）；
}
否则{
x=“span:最后一个孩子”；
x1=“span：第一个孩子”；
$this.attr（“数据切换”，“0”）；
}
$this.find（x）.fadeToggle（500）；
setTimeout（函数（）{
$this.find（x1.fadeToggle（）；
}, 500);
});
按钮{宽度：100px；高度：20px；}
按钮范围：最后一个子项{显示：无}

不切换
切换

$（“#更改”）。在（'click'，function（）上{
var$this=$（this）；
变量x，x1；
if（$this.attr（“数据切换”）=“0”）{
x=“span:第一个孩子”；
x1=“span:最后一个孩子”；
$this.attr（“数据切换”，“1”）；
}
否则{
x=“span:最后一个孩子”；
x1=“span：第一个孩子”；
$this.attr（“数据切换”，“0”）；
}
$this.find（x）.fadeToggle（500）；
setTimeout（函数（）{
$this.find（x1.fadeToggle（）；
}, 500);
});
按钮{宽度：100px；高度：20px；}
按钮范围：最后一个子项{显示：无}

不切换
切换
Wow！这正是我一直在寻找的。谢谢。我想知道是否有任何方法可以控制fadeIn或fadeOut的速度？是的，
“slow”
参数就是为了这个。您可以使用
“slow”
，
“fast”
，或者只传递所需的毫秒数（例如，
200
），非常感谢。我非常感谢你的建议和建议@仅为了存储单个按钮状态而公开全局
var Chg
，这是一种糟糕的设计。你的心态应该始终是代码灵活性-如果最终有一天你将#更改为。更改（和多个按钮）JS应该可以毫无顾忌地工作。哇！这正是我一直在寻找的。谢谢。我想知道是否有任何方法可以控制fadeIn或fadeOut的速度？是的，
“slow”
参数就是为了这个。您可以使用
“slow”
，
“fast”
，或者只传递所需的毫秒数（例如，
200
），非常感谢。我非常感谢你的建议和建议@仅为了存储单个按钮状态而公开全局
var Chg
，这是一种糟糕的设计。你的心态应该始终是代码灵活性-如果最终有一天你将#更改为。更改（和多个按钮）JS应该可以毫无顾忌地工作。哇！这甚至是一个更好的解决方案。非常感谢你的建议。它很漂亮哇！这甚至是一个更好的解决方案。非常感谢你的建议。它很漂亮