Question

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

＆＃13;

 $
 $(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(){
	});;
	});
		});

＆＃13;

<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>

＆＃13;

Answer 1

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

<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之后运行脚本。

Answer 2

我找到了以下解决方案：

＆＃13;

 $(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);
	    });
	    });

＆＃13;

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

＆＃13;

淡入淡出时用jquery替换

2 个答案: