[英]raise opacity for first div at same time reduce for second. And looping
I have 2 divs with background-image. 我有2个具有背景图像的div。 I want to raise at the same time opacity for first div and reduce opacity of another.
我想同时提高第一格的不透明度,并减少另一个的不透明度。 And I want to loop that.
我想循环一下。 I want to get the smoothly effect of shifts backgrounds.
我想获得轮班背景的流畅效果。 Is there such a way to do that?
有这种方法吗?
<div class="first"></div>
<div class="second"></div>
.first, .second {
position: absolute;
height: 100%;
width: 100%;
}
.first {
background: url(http://placehold.it/350x150);
background-size: cover;
opacity: 0;
}
.second {
background: url(http://placehold.it/250x150);
background-size: cover;
opacity: 1;
}
Sure you can. 你当然可以。 Create a function, use
jQuery.animate()
in chain on each element to animate its opacity to the inverse of its value. 创建一个函数,在每个元素的链中使用
jQuery.animate()
将其不透明度动画化为其值的倒数。 Use the function itself as a callback of the second animate function. 使用函数本身作为第二个动画函数的回调。
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
var box = $('.box');
function animateOpacity() {
box.each(function () {
var opacity = parseInt($(this).css('opacity'));
$(this).animate({
opacity: 1 - opacity
}, 800).animate({
opacity: opacity
}, 800, animateOpacity);
});
}
I would do something like that: 我会做这样的事情:
So there is an active
class that changes the opacity and visibility of the imgHolder
. 因此,有一个
active
类可以更改imgHolder
的不透明度和可见性。 If you click on the first image it removes the active
class on that element and jumps to the next element in the DOM and adds there the active
class. 如果单击第一个图像,它将删除该元素上的
active
类,并跳转到DOM中的下一个元素,并在其中添加active
类。 You could get be more save if you write next('imgHolder')
so that only the next element with class imgHolder
gets the active
class. 如果您编写
next('imgHolder')
,则可以节省更多,这样只有下一个具有imgHolder
类的元素imgHolder
获得active
类。
I also add a loop. 我还添加了一个循环。 So with the
length
function it counts how much elements with imgHolder
are in the DOM. 因此,使用
length
函数可以计算imgHolder
中DOM中的元素数量。 In this case 2. So after the second is active
it goes to the first imgHolder
. 在这种情况下,2。因此在第二个
active
后,它转到第一个imgHolder
。
You can see it in action here: http://jsfiddle.net/rcc6y1nn/2/ 您可以在这里查看其运行情况: http : //jsfiddle.net/rcc6y1nn/2/
I hope you want something like that. 我希望你想要那样的东西。
UPDATE UPDATE
Now with setInterval
the class changes after one second in a loop. 现在,使用
setInterval
,类将在循环一秒钟后更改。
HTML HTML
<div class="imgHolder first"></div>
<div class="imgHolder second"></div>
CSS CSS
.imgHolder {
position: absolute;
top: 0;
opacity: 0;
visibility: hidden;
width: 350px;
height: 350px;
-webkit-transition: all 150ms ease-in;
transition: all 150ms ease-in;
}
.imgHolder.first {
background: url('http://lorempixel.com/output/technics-q-c-350-350-10.jpg');
}
.imgHolder.second {
background: url('http://lorempixel.com/output/animals-q-c-350-350-5.jpg');
}
.imgHolder.active {
opacity: 1;
visibility: visible;
}
Javascript 使用Javascript
var $imgHolder = $('.imgHolder');
$imgHolder.first().addClass('active');
setInterval(function(){
var $next = $('.imgHolder.active').removeClass('active').next();
if ($next.length) {
$next.addClass('active');
} else {
$imgHolder.first().addClass('active');
}
}, 1000);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.