Question

我一直试图让以下代码在过去2小时内正常工作，但没有运气。谁能看到我遇到问题？

段：

<script>

$(document).ready(function(e) {
    $('.messageBox').hide();
    $('#color').text('');

    $('.color-select-orange').click(function(e) {
        $('.messageBox').show().delay(2000).hide();
        $('#color').text('Orange').show().delay(2000).hide();
    });

});

</script>

＆＃13;

$(document).ready(function(e) {
    $('.messageBox').hide();
	$('#color').text('');
	
	$('.color-select-orange').click(function(e) {
        $('.messageBox').show().delay(2000).hide();
		$('#color').text('Orange').show().delay(2000).hide();
    });		
});

＆＃13;

.messageBox {
	height: auto;
	width: auto;
	
	text-align: center;
	
	z-index: 100;
		
	padding: 100px;
	
	background-color: #222;
	color: #fff;
	
	font-family: poppins;
	font-size: 14px;
	
	display: block;
}
.messageBox span {
	color: #fff;
	
	font-weight: bold;
	font-family: poppins;
	font-size: 14px;
}
.customiser {
	height: auto;
	width: auto;
	
	position: fixed;
		
	top: 10px;
	left: 0px;
	
	font-size: 14px;
	font-family: poppins;
	
	display: inline-block;
	
	background-color: transparent;
	
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
	
	cursor: pointer;
}



.themes {
	height: auto;
	width: auto;
	
	position: relative;
	
	font-size: 14px;
	font-family: poppins;
	
	display: inline-block;
	
	background-color: #222;
	color: #777;
	
	border-top-right-radius: 10px;
	
	cursor: pointer;
}
.color-select {
	height: auto;
	width: 100px;
		
	padding: 20px;
	
	font-size: 14px;
	font-family: poppins;
	
	display: inline-block;
	
	background-color: #333;
	color: #777;
}
.color-select:hover {
	background-color: #222;
	color: #fff;
}
.color-select-table {
	width: 100%;
	
	background-color: #222;
	
	display: inline-block;
	
	margin-top: 10px;
}
.color-select-orange {
	height: auto;
	width: 100%;
	
	display: inline-block;
	
	background-color: transparent;
	color: #ff6e00;
	
	border-radius: 5px;
	border: thin solid #222;
	
	padding-top: 5px;
	padding-bottom: 5px;
}
.color-select-orange:hover {
	background-color: #ff6e00;
	color: #fff;
}
.color-select-green {
	height: auto;
	width: 100%;
	
	display: inline-block;
	
	background-color: transparent;
	color: #9ad749;
	
	border-radius: 5px;
	border: thin solid #222;
	
	padding-top: 5px;
	padding-bottom: 5px;
}
.color-select-green:hover {
	background-color: #9ad749;
	color: #fff;
}
.color-select-blue {
	height: auto;
	width: 100%;
	
	display: inline-block;
	
	background-color: transparent;
	color: #4589f3;
	
	border-radius: 5px;
	border: thin solid #222;
	
	padding-top: 5px;
	padding-bottom: 5px;
}
.color-select-blue:hover {
	background-color: #4589f3;
	color: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messageBox">Theme successfully changed to<br> <span id="color">*SELECTED_COLOUR*</span></div>



<div class="customiser">

<div class="themes">

<div class="color-select">Theme<br>
	
<div class="color-select-table">
	<div class="color-select-orange" onclick="swapStyleSheet('_scripts/default.css')">Orange</div><br>
    <div class="color-select-green" onclick="swapStyleSheet('_scripts/green.css')">Green</div><br>
    <div class="color-select-blue" onclick="swapStyleSheet('_scripts/blue.css')">Blue</div>
</div>

</div><!--END COLOR-SELECT-->

</div><!--END THEMES-->
  
</div><!--END OF CUSTOMISER-->

＆＃13;

swapStyleSheet命令工作正常，但#color的文本更改和.messageBox的显示更改没有。

Answer 1

jQuery的show()和hide()默认情况下不会设置动画，并且不支持delay()，因为他们不会添加FX队列。

当延迟不起作用时，元素会立即被隐藏，并且在两秒钟内永远不可见。

要使它们设置动画，必须传入一个数字，甚至零也应该传递

＆＃13;

$(document).ready(function(e) {
    $('.messageBox').hide();
    $('#color').text('');

    $('.color-select-orange').click(function(e) {
        console.log('ds')
        $('.messageBox').show().delay(2000).hide(0);
        $('#color').text('Orange').show().delay(2000).hide(0);
    });
});

＆＃13;

.messageBox {
    height: auto;
    width: auto;
    text-align: center;
    z-index: 100;
    padding: 100px;
    background-color: #222;
    color: #fff;
    font-family: poppins;
    font-size: 14px;
    display: block;
}

.messageBox span {
    color: #fff;
    font-weight: bold;
    font-family: poppins;
    font-size: 14px;
}

.customiser {
    height: auto;
    width: auto;
    position: fixed;
    top: 10px;
    left: 0px;
    font-size: 14px;
    font-family: poppins;
    display: inline-block;
    background-color: transparent;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    cursor: pointer;
}

.themes {
    height: auto;
    width: auto;
    position: relative;
    font-size: 14px;
    font-family: poppins;
    display: inline-block;
    background-color: #222;
    color: #777;
    border-top-right-radius: 10px;
    cursor: pointer;
}

.color-select {
    height: auto;
    width: 100px;
    padding: 20px;
    font-size: 14px;
    font-family: poppins;
    display: inline-block;
    background-color: #333;
    color: #777;
}

.color-select:hover {
    background-color: #222;
    color: #fff;
}

.color-select-table {
    width: 100%;
    background-color: #222;
    display: inline-block;
    margin-top: 10px;
}

.color-select-orange {
    height: auto;
    width: 100%;
    display: inline-block;
    background-color: transparent;
    color: #ff6e00;
    border-radius: 5px;
    border: thin solid #222;
    padding-top: 5px;
    padding-bottom: 5px;
}

.color-select-orange:hover {
    background-color: #ff6e00;
    color: #fff;
}

.color-select-green {
    height: auto;
    width: 100%;
    display: inline-block;
    background-color: transparent;
    color: #9ad749;
    border-radius: 5px;
    border: thin solid #222;
    padding-top: 5px;
    padding-bottom: 5px;
}

.color-select-green:hover {
    background-color: #9ad749;
    color: #fff;
}

.color-select-blue {
    height: auto;
    width: 100%;
    display: inline-block;
    background-color: transparent;
    color: #4589f3;
    border-radius: 5px;
    border: thin solid #222;
    padding-top: 5px;
    padding-bottom: 5px;
}

.color-select-blue:hover {
    background-color: #4589f3;
    color: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messageBox">Theme successfully changed to
    <br> <span id="color">*SELECTED_COLOUR*</span>
</div>
<div class="customiser">
    <div class="themes">
        <div class="color-select">Theme
            <br>
            <div class="color-select-table">
                <div class="color-select-orange">Orange</div>
                <br>
                <div class="color-select-green">Green</div>
                <br>
                <div class="color-select-blue">Blue</div>
            </div>
        </div>
    </div>
</div>

＆＃13;

JQuery .show（）和.hide（）无法正常工作

1 个答案: