淡入淡出时替换为jquery

Posted 2023-05-08

【中文标题】淡入淡出时替换为jquery

【英文标题】：Replace with jquery while fading in and out

【发布时间】：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>

【参考方案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>