FadeIn на клик и FadeOut другие элементы - PullRequest
Новая
       15

FadeIn на клик и FadeOut другие элементы

0 голосов
/ 05 октября 2018

Приведенный ниже код показывает модальные шторы, в зависимости от того, какую иконку вы выберете.Как сделать так, чтобы элементы появлялись и исчезали на клике, а не просто появлялись и исчезали?

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 голосов
/ 05 октября 2018

С некоторыми быстрыми jQuery мы можем

  1. fadeIn .modal с id.
  2. нацелить на все модальные дивы, которые этого не имеютid и 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>
...