问题描述
是我的测试页面，我希望在页面加载时所有内容都被隐藏。 当我单击“关于”时，文本会使用fadeToggle（）淡入； 但是，当我单击“我的作品”时，另一文本消失了，但是在前一个文本之下。 我想淡出上一个。 你能帮我吗？
我的代码：
<script> $(document).ready(function(){ $(".thumbnail").hide(); $(".work").click(function(){ $(".thumbnail").fadeToggle('slow'); }); }); $(document).ready(function(){ $(".person").hide(); $(".about").click(function(){ $(".person").fadeToggle('slow'); }); }); </script>
1楼
Shrinivas Pai
3
已采纳
2015-07-30 13:24:47
尝试这个。
$(document).ready(function(){
$(".thumbnail").hide();
$(".person").hide();
$(".work").click(function(){
$(".person").hide();
$(".thumbnail").fadeToggle('slow');
});
$(".about").click(function(){
$(".thumbnail").hide();
$(".person").fadeToggle('slow');
});
});
根据Matthew的评论
2楼
Matteo Rubini
2
2015-07-30 13:32:59
这是一个常见问题：
要显示多个项目，但一次显示其中一个
简单的解决方案是：
- 隐藏所有元素
- 显示你想看的东西
这样，您可以涵盖所有可能的解决方案，甚至什么也不显示，而您可以跳过第二阶段
在您的情况下：
function hideAll(){
$(".thumbnail").hide();
$(".person").hide();
// ...... others ......
}
$(document).ready(function(){
$(".work").click(function(){
hideAll();
$(".thumbnail").fadeToggle('slow');
});
$(".about").click(function(){
hideAll();
$(".person").fadeToggle('slow');
});
hideAll();
});
3楼
Stewartside
0
2015-07-30 13:30:51
这是一件非常容易完成的事情，最好在要打开的div中使用相同的click事件名称，以便将其模块化。
对HTML进行了一些小的修改，并对JS进行了很大的更改，但是它可以像您现在想要的那样用于任意多个部分，而不必不断添加新的click()函数。
$(document).ready(function() { $('section').hide(); $(".btn").click(function() { $('section').fadeOut('1000'); $('section#'+$(this).attr('id')).delay('1000').fadeIn(); }); });
/* CSS Document html { background: url(green.jpg) no-repeat center center fixed; background-size: cover; } */ body { font-family: 'Candara', 'Open Sans', 'sans-serif'; } /* css for the shiny buttons */ .btn { cursor: pointer; margin: 10px; text-decoration: none; padding: 10px; font-size: 14px; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; display: inline-block; } .btn:hover { cursor: url(http://cur.cursors-4u.net/symbols/sym-1/sym46.cur), auto; } .contact { color: #000; } .contact:hover { background-color: #ecf0f1; color: #000; opacity: 0.5; filter: Alpha(opacity=50); } .about { color: #000; } .about:hover { background-color: #ecf0f1; color: #000; opacity: 0.5; filter: Alpha(opacity=50); } .work { color: #000; } .work:hover { background-color: #ecf0f1; color: #000; opacity: 0.5; filter: Alpha(opacity=50); } } .buttons { padding-top: 30px; text-align: center; position: absolute; top: 50px; left: 100px; } .title, .subtitle { font-family: 'Wire one'; font-weight: normal; font-size: 5em; margin-bottom: 15px; text-align: center; } .subtitle { line-height: .9em; font-size: 5.5em; margin-top: 0; margin-bottom: 40px; } .tagline { font-size: 1.4em; line-height: 1.3em; font-weight: normal; text-align: center; } .thumbnail { background-color: rgba(255, 255, 255, .2); border: 0 none; padding: 10px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .thumbnail .caption { color: inherit; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="buttons"> <a class="btn" id="about">About</a> <a class="btn" id="work">My Work</a> <a class="btn" id="contact">Contact</a> </div> <!-- Main (Home) section --> <section class="section" id="about"> <div class="container"> <div class="person" style="display: block;"> <div class="row"> <div class="col-md-10 col-lg-10 col-md-offset-1 col-lg-offset-1 text-center"> <!-- Site Title, your name, HELLO msg, etc. --> <h1 class="title">Welcome!</h1> <h2 class="subtitle">My name is Daniel Adamek</h2> <!-- Short introductory (optional) --> <h3 class="tagline"> I am 23 years old IT enthusiast located in Zlin, Czech Republic.<br> Currently, I am looking for any kind of job in IT field.<br> Please, check out my work and feel free to contact me :) </h3> <!-- Nice place to describe your site in a sentence or two --> </div> </div> <!-- /col --> </div> <!-- /row --> </div> </section> <!-- Third (Works) section --> <section class="section" id="work"> <div class="container"> <div class="thumbnail" style="display: block;"> <h2 class="text-center title">More Themes</h2> <p class="lead text-center"> Huge thank you to all people who publish <br>their photos at <a href="http://unsplash.com">Unsplash</a>, thank you guys! </p> </div> <div class="row"> <div class="col-sm-4 col-sm-offset-2"> <div class="thumbnail" style="display: block;"> <img src="" alt=""> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div> </div> <div class="col-sm-4"> <div class="thumbnail" style="display: block;"> <img src="" alt=""> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div> </div> <div class="col-sm-4 col-sm-offset-2"> <div class="thumbnail" style="display: block;"> <img src="" alt=""> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div> </div> <div class="col-sm-4"> <div class="thumbnail" style="display: block;"> <img src="" alt=""> <div class="caption"> <h3>Thumbnail label</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div> </div> </div> </div> </section>
如果您确实希望保持HTML完全相同，请尝试一下
$(document).ready(function(){
$(".thumbnail").hide();
$(".person").hide();
$(".work").click(function(){
$(".person").fadeOut('500');
$(".thumbnail").delay('500').fadeIn('slow');
});
$(".about").click(function(){
$(".thumbnail").fadeOut('500');
$(".person").delay('500').fadeIn('slow');
});
});
4楼
Mouser
0
2015-07-30 13:31:09
function hideAll() { $(".hideable").hide(); } $(document).ready(function(){ hideAll(); // great idea. First hide all then show the correct one. $(".button").click(function(){ hideAll(); if ($(this).hasClass("work")) { $(".thumbnail").fadeToggle('slow'); } else if ($(this).hasClass("about")) { $(".person").fadeToggle('slow'); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="thumbnail hideable">thumbnail</div> <div class="person hideable">person</div> <button class="work button">Work</button> <button class="about button">About</button>
这个例子应该给你一个开始。
它使用.button类选择器将click事件附加到按钮。
然后，它检查按钮是否具有另一个类并执行适当的操作。
5楼
Adjit
-1
2015-07-30 13:31:58
您的问题不依赖于jQuery-它依赖于CSS并将这两个文本彼此重叠地设置样式。 然后您可以淡入/淡出。
我建议尝试的是将两个文本都包装在一个div并使用position属性。
即
的HTML
<div class="wrapper">
<div class="thubmnail">Some Thumbnail</div>
<div class="person">Some Person</div>
</div>
的CSS
.wrapper {
position: relative;
}
.wrapper div {
position: absolute; //This will position both divs one on top of the other
}