淡入淡出时替换为jquery答案

【问题标题】：Replace with jquery while fading in and out淡入淡出时替换为jquery
【发布时间】：2018-03-02 22:38:08
【问题描述】：

当第一个按钮淡出时，我试图淡入第二个按钮。如果您有任何建议，请回复。

 $
 $(document).on('click',"#firstbutton",function(){
	 $('#firstbutton').fadeOut("5000", function(){
		var div = $("<button id='secondbutton'>Second button</button>");
		 $('#firstbutton').replaceWith(div).fadeIn("5000", function(){
	});
	});
		});
		
		
  $(document).on('click',"#secondbutton",function(){
	 $('#secondbutton').fadeOut("5000", function(){
		var div = $("<button id='firstbutton'>First button</button>");
		 $('#secondbutton').replaceWith(div).fadeIn("5000", function(){
	});;
	});
		});

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="firstbutton">First button</button>

【问题讨论】：

标签： jquery replace jquery-animate fade

【解决方案1】：

只包含 jQuery 一次（你已经包含了 3 次）：

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

正确格式化您的脚本：

$(document).on('click', "#firstbutton", function () {
    $('#firstbutton').fadeOut("5000", function () {
        var div = $("<button id='secondbutton'>Second button</button>");
            $('#firstbutton').replaceWith(div).fadeIn("5000", function () {
        });
    });
});


$(document).on('click', "#secondbutton", function () {
    $('#secondbutton').fadeOut("5000", function () {
        var div = $("<button id='firstbutton'>First button</button>");
            $('#secondbutton').replaceWith(div).fadeIn("5000", function () {
        });
    });
});

并确保您在 jQuery 加载之后运行脚本。

【讨论】：

这毫无意义，你也无法回答。
嗯，这对我来说很有意义，并且当我运行它时它会起作用。我只是想给你一些时间来帮助你:-) 这几乎正是你在我发布此内容一分钟后发布的答案。

【解决方案2】：

我找到了以下解决方案：

 $(document).on('click',"#firstbutton",function(){
	$('#firstbutton').fadeOut("5000", function(){
		var div = $("<button id='secondbutton'>Second button</button>").fadeIn(3000);		
		$('#firstbutton').replaceWith(div);
		});
		});
		
  $(document).on('click',"#secondbutton",function(){
	$('#secondbutton').fadeOut("5000", function(){
		var div = $("<button id='firstbutton'>First button</button>").fadeIn(3000);		
		$('#secondbutton').replaceWith(div);
	    });
	    });

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
	<button id="firstbutton">First button</button>

【讨论】：