如何将 show/hide 更改为不透明度 0-1(而不是 fadein/out)?
How to change show/hide to opacity 0-1 (not fadein/out)?
代码编辑自show hide divs using Next Previous button using jQuery?
我想将 1000 毫秒的不透明度 css 更改为外部 div 而不是突然 show/hide 但不知道如何操作。我不想使用 fadein/out 的原因是因为如果我将 div 放在 div 容器中的 div 中,最里面的 div 将隐藏可见性
这是我目前的情况:https://jsfiddle.net/3y7ty3o7/2/
HTML:
<div class="divs">
<div id="one">
<div class="content-b">
<h1>KEYS TO SUCCESS</h1>
<h3>Digial Design Intern</h3>
<a href="#"><div id="c">LEARN MORE</div></a>
</div>
</div>
<div id="two"></div>
<div id="three"></div>
</div>
<div>tesstttttttt</div>
<div id="prev">Prev</div>
<div id="next">Next</div>
CSS:
.cls1{
background: red;
height: 200px;
width: 200px;
}
.cls2{
background: blue;
height: 200px;
width: 200px;
}
.cls3{
background: green;
height: 200px;
width: 200px;
}
#prev{
background: gray;
height: 50px;
width: 50px;
}
#next{
background: orange;
height: 50px;
width: 50px;
}
javascript:
$(document).ready(function () {
$(".divs div").each(function (e) {
if (e != 0) $(this).hide();
});
$("#next").click(function () {
if ($(".divs div:visible").next().length != 0) {
$(".divs div:visible").fadeOut(1000, function(){
$(this).next().fadeIn(1000)
});
} else {
$(".divs div:visible").fadeOut(1000, function () {
$(".divs div:first").fadeIn(1000);
});
}
return false;
});
$("#prev").click(function () {
if ($(".divs div:visible").prev().length != 0) {
$(".divs div:visible").fadeOut(1000, function(){
$(this).prev().fadeIn(1000);
});
} else {
$(".divs div:visible").fadeOut(1000, function () {
$(".divs div:last").fadeIn(1000);
});
}
return false;
});
});
.fadeTo(1000, 1)
或 fadeTo(1000, 0)
应该这样做!
Adjust the opacity of the matched elements.
代码编辑自show hide divs using Next Previous button using jQuery?
我想将 1000 毫秒的不透明度 css 更改为外部 div 而不是突然 show/hide 但不知道如何操作。我不想使用 fadein/out 的原因是因为如果我将 div 放在 div 容器中的 div 中,最里面的 div 将隐藏可见性
这是我目前的情况:https://jsfiddle.net/3y7ty3o7/2/
HTML:
<div class="divs">
<div id="one">
<div class="content-b">
<h1>KEYS TO SUCCESS</h1>
<h3>Digial Design Intern</h3>
<a href="#"><div id="c">LEARN MORE</div></a>
</div>
</div>
<div id="two"></div>
<div id="three"></div>
</div>
<div>tesstttttttt</div>
<div id="prev">Prev</div>
<div id="next">Next</div>
CSS:
.cls1{
background: red;
height: 200px;
width: 200px;
}
.cls2{
background: blue;
height: 200px;
width: 200px;
}
.cls3{
background: green;
height: 200px;
width: 200px;
}
#prev{
background: gray;
height: 50px;
width: 50px;
}
#next{
background: orange;
height: 50px;
width: 50px;
}
javascript:
$(document).ready(function () {
$(".divs div").each(function (e) {
if (e != 0) $(this).hide();
});
$("#next").click(function () {
if ($(".divs div:visible").next().length != 0) {
$(".divs div:visible").fadeOut(1000, function(){
$(this).next().fadeIn(1000)
});
} else {
$(".divs div:visible").fadeOut(1000, function () {
$(".divs div:first").fadeIn(1000);
});
}
return false;
});
$("#prev").click(function () {
if ($(".divs div:visible").prev().length != 0) {
$(".divs div:visible").fadeOut(1000, function(){
$(this).prev().fadeIn(1000);
});
} else {
$(".divs div:visible").fadeOut(1000, function () {
$(".divs div:last").fadeIn(1000);
});
}
return false;
});
});
.fadeTo(1000, 1)
或 fadeTo(1000, 0)
应该这样做!
Adjust the opacity of the matched elements.