0
请参阅下面的链接，我想要做的是自我解释...我在div之间切换，并且当前div淡出并且一个新的淡入淡出。我的问题是，如果你尝试这个例子......有时当我在“厨房”和“电子”之间切换时，我会得到额外的淡入淡出和淡出。有谁知道我可以解决这个问题？Jquery FadeIn（）方法发生两次
HTML：
<div id="panelControllers">
<ul>
<li>
<button class="panelControlBtn" data-id="1">
General
</button>
</li>
<li>
<button class="panelControlBtn" data-id="2">
Kitchen
</button>
</li>
<li>
<button class="panelControlBtn" data-id="3">
Electronics
</button>
</li>
<li>
<button class="panelControlBtn" data-id="4">
Outside
</button>
</li>
<li>
<button class="panelControlBtn" data-id="5">
Other
</button>
</li>
</ul>
</div>
<div id="panelContainer">
<div id="panel1" class="panel">
<div class="row general">
<button data-value="8" value="4000" class="">Central Air Conditioner</button>
<button data-value="8" value="1000" class="">Room Air Conditioner</button>
<button data-value="8" value="300" class="">Portable Heater</button>
</div>
<div class="row general">
<button value="3" class="4900">Clothes Dryer</button>
<button value="3" class="512">Washer</button>
<button value="1" class="1000">Clothes Iron</button>
<button value="3" class="500">Upright Vacuum</button>
<button value="3" class="40">Hand Vacuum</button>
</div>
<div class="row general">
<button data-value="8" value="177" class="">Air Humidifier</button>
<button data-value="12" value="257" class="">Air Dehumidifier</button>
<button data-value="7" value="300" class="">Furnace Fan</button>
<button data-value="12" value="125" class="">Ceiling Fan</button>
<button data-value="2" value="1000" class="">Fan - Attic</button>
<button data-value="" value="300" class="">Fan - Furnace</button>
</div>
</div>
<div id="panel2" class="panel" style="display:none;">
<div class="row kitchen">
<button data-value="12" value="800">Large Refridgerator</button>
<button data-value="12" value="400">Small Refrigerator</button>
<button data-value="12" value="350">Freezer</button>
<button data-value="" value=""></button>
</div>
<div class="row kitchen">
<button data-value="0.5" value="1200">Oven</button>
<button data-value="0.5" value="12200">Range</button>
<button data-value="0.5" value="1200">Hot Plate</button>
<button data-value="0.5" value="1450">Microwave Oven</button>
<button data-value="0.5" value="1000">Microwave</button>
<button data-value="0.5" value="1200">Toaster Oven</button>
<button data-value="0.5" value="1200">Electric Frying Pan</button>
<button data-value="1" value="1200">DishWasher</button>
<button data-value="" value=""></button>
</div>
<div class="row kitchen">
<button data-value="1" value="900">Coffee Maker</button>
<button data-value="0.1" value="400">Blender/Food Processor</button>
<button data-value="0.5" value="500">Blender</button>
<button data-value="0.5" value="1200">Kettle</button>
</div>
<div class="row kitchen">
<button data-value="0.5" value="850">Toaster</button>
<button data-value="0.5" value="1500">Electric Grill</button>
<button data-value="0.5" value="1200">Waffle Iron</button>
<button data-value="0.5" value="250">Rice Cooker</button>
</div>
</div>
<div id="panel3" class="panel" style="display:none;">
<div class="row electronics">
<button value="" value="">Small LED TV</button>
<button value="" value="">Large LED TV</button>
<button value="" value="">Small LCD TV</button>
<button value="" value="">Large LCD TV</button>
<button value="" value="40">VCR</button>
<button value="" value="30">CD Player</button>
<button value="" value=""></button>
<button value="" value=""></button>
<button value="" class=""></button>
<button value="" class=""></button>
</div>
<div class="row electronics">
<button value="" class="50">Laptop</button>
<button value="" class="300">Desktop Computer</button>
<button value="" value="100">Inkjet Printer</button>
<button value="" value="100">Lazer Printer</button>
</div>
<div class="row electronics">
<button value="" value="1">Electric Clock</button>
<button value="" value="1">Clock Radio</button>
<button value="" class="100">Radiotelephone</button>
<button value="" class="20">Stereo</button>
</div>
<div class="row electronics">
<button data-value="" value="12">Shaver</button>
<button data-value="" value="1000">Blow Dryer</button>
</div>
</div>
</div>
JS
var currentPanel = 1;
$('.panelControlBtn').on("click", function() {
var ID = $(this).attr('data-id');
if (ID != currentPanel) {
$(".panel").fadeOut('fast', function() {
$("#panel" + ID).fadeIn('fast');
});
currentPanel = ID;
}
});
https://jsfiddle.net/L7cqnmma/
这是因为你正在做的事情，淡入淡出。 –