单击时淡入淡出其他元素

Question

下面的代码显示了一个模式，根据您选择的图标隐藏其他模式。如何让元素在单击时淡入和淡出，而不是仅仅出现和消失？

jQuery...

$j(document).ready(function($) {
  $(".modal").hide();

  $(".close-button").click(function(e) {
    e.preventDefault();
    $(".modal").fadeOut('fast');
  });
});

function showHide(d) {
  var onediv = document.getElementById(d);
  var divs = ['tree-surgery', 'site-clearance', 'stump-grinding', 'hedge-trimming', 'conservation', 'commercial'];
  for (var i = 0; i < divs.length; i++) {
    if (onediv != document.getElementById(divs[i])) {
      document.getElementById(divs[i]).style.display = 'none';
    }
  }
  onediv.style.display = 'block';
}

HTML...

                <!-- modals -->

                <div id="tree-surgery" class="modal">

                </div><!-- end .modal -->
                <div id="site-clearance" class="modal">
                </div><!-- end .modal -->
                <div id="stump-grinding" class="modal">
                </div><!-- end .modal -->
                <div id="hedge-trimming" class="modal">
                </div><!-- end .modal -->
                <div id="conservation" class="modal">
                </div><!-- end .modal -->
                <div id="commercial" class="modal">
                </div><!-- end .modal -->

                <!-- icons -->


                        <a href="javascript:showHide('tree-surgery');">
                        <span>Tree Surgery</span></div>
                        </a>
                    </div>
                    <div class="cell small-12 medium-6 large-4 block">
                        <a href="javascript:showHide('site-clearance');">
                        <span>Site Clearance</span></div>
                        </a>
                    </div>
                    <div class="cell small-12 medium-6 large-4 block">
                        <a href="javascript:showHide('stump-grinding');">
                        <span>Stump Grinding</span></div>
                        </a>
                    </div>
                    <div class="cell small-12 medium-6 large-4 block">
                        <a href="javascript:showHide('hedge-trimming');">
                        <span>Hedge Trimming</span></div>
                        </a>
                    </div>
                    <div class="cell small-12 medium-6 large-4 block">
                        <a href="javascript:showHide('conservation');">
                        <span>Conservation</span></div>
                        </a>
                    </div>
                    <div class="cell small-12 medium-6 large-4 block">
                        <a href="javascript:showHide('commercial');">
                        <span>Commercial</span></div>
                        </a>
                    </div>

我也试过添加 .show 和 .hide 类不透明度过渡，但这也没有用。

Answer 1

通过快速 jQuery 我们能够

fadeIn .modal 和 id.
定位所有没有该 ID 的模态 div 和 fadeOut 在 jquery-ui

在聊天中确定您正在使用 $j 来避免 jQuery 冲突，此版本修改了 jQuery 对象

$j = jQuery.noConflict(); 
function showHide(d) {
  $j(`#${d}`).fadeIn("fast"); //show the selected one in case its hidden
  $j(`div.modal:not([id=${d}])`).fadeOut("slow");  //fadeOut the others.
}

div[id] {
  border: 1px solid black;
  width: 150px;
  height: 150px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<!-- modals -->

<div id="tree-surgery" class="modal">

</div>
<!-- end .modal -->
<div id="site-clearance" class="modal">
</div>
<!-- end .modal -->
<div id="stump-grinding" class="modal">
</div>
<!-- end .modal -->
<div id="hedge-trimming" class="modal">
</div>
<!-- end .modal -->
<div id="conservation" class="modal">
</div>
<!-- end .modal -->
<div id="commercial" class="modal">
</div>
<!-- end .modal -->

<!-- icons -->
<br />

<a href="javascript:showHide('tree-surgery');">
  <span>Tree Surgery</span></div>
</a>
</div>
<div class="cell small-12 medium-6 large-4 block">
  <a href="javascript:showHide('site-clearance');">
    <span>Site Clearance</span></div>
</a>
</div>
<div class="cell small-12 medium-6 large-4 block">
  <a href="javascript:showHide('stump-grinding');">
    <span>Stump Grinding</span></div>
</a>
</div>
<div class="cell small-12 medium-6 large-4 block">
  <a href="javascript:showHide('hedge-trimming');">
    <span>Hedge Trimming</span></div>
</a>
</div>
<div class="cell small-12 medium-6 large-4 block">
  <a href="javascript:showHide('conservation');">
    <span>Conservation</span></div>
</a>
</div>
<div class="cell small-12 medium-6 large-4 block">
  <a href="javascript:showHide('commercial');">
    <span>Commercial</span></div>
</a>
</div>

标准jQuery

function showHide(d) {
  $(`#${d}`).fadeIn("fast"); //show the selected one in case its hidden
  $(`div.modal:not([id=${d}])`).fadeOut("slow");  //fadeOut the others.
}

div[id] {
  border: 1px solid black;
  width: 150px;
  height: 150px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<!-- modals -->

<div id="tree-surgery" class="modal">

</div>
<!-- end .modal -->
<div id="site-clearance" class="modal">
</div>
<!-- end .modal -->
<div id="stump-grinding" class="modal">
</div>
<!-- end .modal -->
<div id="hedge-trimming" class="modal">
</div>
<!-- end .modal -->
<div id="conservation" class="modal">
</div>
<!-- end .modal -->
<div id="commercial" class="modal">
</div>
<!-- end .modal -->

<!-- icons -->
<br />

<a href="javascript:showHide('tree-surgery');">
  <span>Tree Surgery</span></div>
</a>
</div>
<div class="cell small-12 medium-6 large-4 block">
  <a href="javascript:showHide('site-clearance');">
    <span>Site Clearance</span></div>
</a>
</div>
<div class="cell small-12 medium-6 large-4 block">
  <a href="javascript:showHide('stump-grinding');">
    <span>Stump Grinding</span></div>
</a>
</div>
<div class="cell small-12 medium-6 large-4 block">
  <a href="javascript:showHide('hedge-trimming');">
    <span>Hedge Trimming</span></div>
</a>
</div>
<div class="cell small-12 medium-6 large-4 block">
  <a href="javascript:showHide('conservation');">
    <span>Conservation</span></div>
</a>
</div>
<div class="cell small-12 medium-6 large-4 block">
  <a href="javascript:showHide('commercial');">
    <span>Commercial</span></div>
</a>
</div>

版本 1：可点击的 div

$(function() {
  $("div.modal").click(function(e) {
    //this is the clicked div
    showHide(this.id);
    $(this).text(this.id);  //make the content of the div it's id for demonstration purposes
  });
});

function showHide(d) {
  var divs = $(`div.modal:not([id=${d}])`).fadeOut("slow");
  //$(`#${d}`).fadeIn("fast"); //incase you want to fade the clicked one back in.
}

div[id] {
  border: 1px solid black;
  width: 150px;
  height: 150px;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<div id="tree-surgery" class="modal"></div>
<div id="site-clearance" class="modal"></div>
<div id="stump-grinding" class="modal"></div>
<div id="hedge-trimming" class="modal"></div>
<div id="conservation" class="modal"></div>
<div id="commercial" class="modal"></div>

单击时淡入淡出其他元素

FadeIn on click and FadeOut other elements

jquery

show-hide

fadeout

fadein