点击时淡入和淡出其他元素

时间:2018-10-05 15:23:48

标签: jquery show-hide fadein fadeout

下面的代码根据您选择的图标显示了一个模式隐藏其他模式。如何使元素淡入淡出onClick,而不仅仅是出现和消失?

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类,但这也不起作用。

1 个答案:

答案 0 :(得分:1)

通过快速jQuery,我们可以

  1. fadeIn.modalid
  2. 定位所有没有该ID和fadeOut的模式div 在jquery-ui
  3. 的帮助下

在聊天中,确定您正在使用$ 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>