0
Siehe den unten stehenden Link, was ich versuche zu tun ist selbsterklärend ... Ich wechsle zwischen Divs und die aktuelle div ausblenden und eine neue verblassen. Mein Problem ist, wenn Sie das Beispiel versuchen ... Einige Male, wenn ich zwischen "Küche" und "Elektronik" umschalte, bekomme ich Extrablenden und Fade-Outs. Weiß jemand, dass ich das beheben kann?Jquery FadeIn() Methode passiert zweimal
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/
Es ist, weil Sie Dinge tun, verblassen und ausbleichen. –