[英]Fade in and out multiple elements
I want to make a photo gallery type effect but instead of a carousel slider, I want to just fade in and out. 我想制作一个照相馆类型的效果,但我想淡入淡出而不是旋转木马滑块。
What I've tried so far: 到目前为止,我已经尝试过:
// To hide all but the first image when page load $('.homeBanners .helloContainer:gt(0)').hide(); $(".homeBanners").mouseenter(function() { clearTimeout($(this).data('homeBannerScrollTime')); }).mouseleave(function() { var homeBannerElement = $(this), homeBannerScrollTime = setInterval(function() { $('.homeBanners :first-child').fadeOut(500).next().fadeIn(500).end().appendTo('.homeBanners'); }, 1000); //set the timeoutId, allowing us to clear this trigger if the mouse comes back over homeBannerElement.data('homeBannerScrollTime', homeBannerScrollTime); });
.homeBanners { width: 2000px!important; height: 400px; position:relative; border: 1px solid red; padding: 5px; } .homeBanners img { width: 100%!important; height: 400px; position:absolute; top:0; left:0; } .hello { display: block; float: left; margin-left: 10px; background-color: blue; width: 200px; height: 200px; } .hello2 { background-color: red; width: 200px; height: 200px; } .hello3 { background-color: green; width: 200px; height: 200px; } .hello4 { background-color: purple; width: 200px; height: 200px; } .hello5 { background-color: grey; width: 200px; height: 200px; } .hello6 { background-color: aqua; width: 200px; height: 200px; } .homeBanners img:hover { cursor: pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="homeBanners"> <div class="helloContainer"> <div class="hello"></div> <div class="hello hello2"></div> <div class="hello hello3"></div> </div> <div class="helloContainer"> <div class="hello hello4"></div> <div class="hello hello5"></div> <div class="hello hello6"></div> </div> </div>
What I want to happen: 我想发生的事情:
---- First Run ---- - - 首轮 - -
--- Shown container --- ---所示容器---
<div class="helloContainer">
<div class="hello"></div>
<div class="hello hello2"></div>
<div class="hello hello3"></div>
</div>
--- Hidden container --- -隐藏的容器-
<div class="helloContainer">
<div class="hello hello4"></div>
<div class="hello hello5"></div>
<div class="hello hello6"></div>
</div>
--- Fade in and out --- -淡入淡出-
--- Shown container (fade out) --- ---显示的容器(淡出)---
<div class="helloContainer">
<div class="hello"></div>
<div class="hello hello2"></div>
<div class="hello hello3"></div>
</div>
--- Hidden container (fade in) --- -隐藏的容器(淡入)-
<div class="helloContainer">
<div class="hello hello4"></div>
<div class="hello hello5"></div>
<div class="hello hello6"></div>
</div>
Hope this is enough information for everyone to understand, If you need anymore information please just comment below. 希望这对于每个人来说都是足够的信息,如果您需要更多的信息,请在下面评论。
http://api.jquery.com/fadetoggle/ http://api.jquery.com/fadetoggle/
Have one div hidden with CSS ( display:none
), you will have to give it a unique identifier, obviously. 在CSS中隐藏一个div( display:none
),显然,您将不得不为其赋予唯一标识符。
using jQuery, toggle the two Divs like: 使用jQuery,切换两个Divs,例如:
$('helloContainer').fadeToggle();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.