下面的代码根据您选择的图标显示了一个模式隐藏其他模式。如何使元素淡入淡出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类,但这也不起作用。
答案 0 :(得分:1)
通过快速jQuery
,我们可以
fadeIn
和.modal
与id
。fadeOut
的模式div
在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>