Question

请参阅下面的链接，我正在尝试做的是自我解释......我在div之间切换并且当前div淡出并且新的淡入淡出。我的问题是，如果你尝试这个例子...有时当我在“厨房”和“电子产品”之间切换时，我会得到额外的淡入淡出和淡出。有谁知道我可以解决这个问题？

HTML：

/uploadfolder/guid1/file1.txt<br>
/uploadfolder/guid1/file2.txt<br>

JS

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

https://jsfiddle.net/L7cqnmma/

Answer 1

原因是$(".panel").fadeOut('fast'...遍历每个.panel元素。当您将fadeIn附加到此函数时，fadeIn会多次发生，您不希望这种情况发生。在淡出最后一个fadeIn元素后，您必须应用.panel。

我建议的解决方案伴随着光荣的promise()：

$('.panelControlBtn').on("click", function() {
  var ID = $(this).attr('data-id');
  if (ID != currentPanel) {
    $(".panel").fadeOut('fast').promise().done(function() { //Promise ensures that fadeOuts are finished before firing the upcoming action
      $("#panel" + ID).fadeIn('fast');
    });
    currentPanel = ID;
  }
});

下面是一个工作片段。

var currentPanel = 1;

$('.panelControlBtn').on("click", function() {
  var ID = $(this).attr('data-id');
  if (ID != currentPanel) {
    $(".panel").fadeOut('fast').promise().done(function() { //Promise ensures that fadeOuts are finished before firing the upcoming action
      $("#panel" + ID).fadeIn('fast');
    });
    currentPanel = ID;
  }
});

#panelControllers {
  height: 30px;
}

#panelControllers ul li {
  float: left;
  list-style: none;
}

#panelContainer {
  position: relative;
}

.panel {
  width: 100%;
  height: 300px;
  position: absolute;
  left: 0;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 2

为什么不给按钮个人ID。这会简单得多。这样你就可以在点击一个时隐藏另一个。

Answer 3

<script>
var currentPanel = 1;
$('.panelControlBtn').on("click", function() {
var ID = $(this).attr('data-id');
 if (ID != currentPanel) {
$(".panel").hide();
$("#panel" + ID).fadeIn('slow');
currentPanel = ID;
}
});
</script>

尝试该脚本

Answer 4

页面中有三个面板，因此$（＆＃34; .panel＆＃34;）返回3个面板元素并淡出。淡出每个元素后，fadeIn再次启动。您可以通过在交换机上添加活动类来仅检测活动面板，这样您就可以仅在活动面板上调用fadeOut。

Jquery FadeIn（）方法发生两次

4 个答案: