How can I crossfade divs in one at a time with jquery - javascript

I'm trying to crossfade image divs in succession upon hovering another div. I'm missing something however, as it's not changing the image upon hover and is instead fading in and out the same div. Any help would be greatly appreciated.
Here's a fiddle.
$('.card').hover(function() {
var delay = 0;
$('.fade-m').each(function() {
var $fade = $(this);
$fade.find(".front").fadeOut();
$fade.find(".back").fadeIn();
setTimeout(function() {
$fade.find(".back").fadeOut();
$fade.find(".front").fadeIn();
}, delay += 500);
});
});
.fade-m {
position: relative;
transform-style: preserve-3d;
transition: all 1s ease-in-out;
}
.fade {
border: 1px solid red;
}
.front {
display: block;
z-index: 2;
}
.back {
position: absolute;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
<div class="hover-text">
<h3>hover text</h3>
</div>
</div>
<span class="fade-m">
<div class="front">
<img src="http://lorempixel.com/50/50">
</div>
<div class="back">
<img src="http://lorempixel.com/60/60">
</div>
</span>
<span class="fade-m">
<div class="front">
<img src="http://lorempixel.com/50/50">
</div>
<div class="back">
<img src="http://lorempixel.com/60/60">
</div>
</span>

I believe this is what you want, but it doesn't use jQuery, just pure CSS3. You may need to run the CSS through an autoprefixer if you want to support browsers that don't support unprefixed versions of some of the properties.
.fade-m {
position: relative;
display:block;
}
/* Make all transtions on the img last .5 seconds */
.fade-m img {
transition: 0.5s all;
}
/* place the back img in the same spot as the front img */
.fade-m .back img {
position: absolute;
top: 0;
}
/* Make sure the front img is always on top of the back img */
.fade-m .front img {
position: relative;
z-index: 2;
opacity: 1;
}
/* Change opacity of the front img to 0 on hover */
.card:hover ~ .fade-m .front img {
opacity: 0;
}
/* Delay the transition on hover of the second .fade-m by .5 seconds */
.card:hover + .fade-m + .fade-m img {
transition-delay: .5s;
}
<div class="card">
<div class="hover-text">
<h3>hover text</h3>
</div>
</div>
<span class="fade-m">
<div class="front">
<img src="http://lorempixel.com/g/50/50">
</div>
<div class="back">
<img src="http://lorempixel.com/50/50">
</div>
</span>
<span class="fade-m">
<div class="front">
<img src="http://lorempixel.com/g/50/50">
</div>
<div class="back">
<img src="http://lorempixel.com/50/50">
</div>
</span>
Cleaner version:
/* Only if you don't have similar in your normalize.css/reset.css */
.card ul { padding: 0; }
.card li {
position: relative;
height: 50px;
}
/* Make all transtions on the img last .5 seconds */
.card img {
transition: 0.5s all;
}
/* place images in the same spot and visible */
.card li img {
position: absolute;
top: 0;
left: 0;
opacity: 1;
}
/* Make sure the front img is always on top of the back img */
.card img:first-child {
z-index: 2;
}
/* Change opacity of the front img to 0 on hover */
.card:hover img:first-child {
opacity: 0;
}
/* Use this instead if you want the hover to only work on the h3 and not the entire card
.card h3:hover + ul img:first-child {
opacity: 0;
}*/
/* Delay the transition on hover of the second .fade-m by .5 seconds */
.card:hover li:nth-child(2) img {
transition-delay: .5s;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<div class="card">
<h3>hover text</h3>
<ul>
<li>
<img src="http://lorempixel.com/g/50/50">
<img src="http://lorempixel.com/50/50">
</li>
<li>
<img src="http://lorempixel.com/g/50/50">
<img src="http://lorempixel.com/50/50">
</li>
</ul>
</div>

As the comments have mentioned, nobody is really clear on what exactly it is that you are looking for. I took a shot at it, but it was a shot in the dark at best.
setTimeout();
is non-blocking, so it will not delay the execution of a loop or iterator like you have it in your original code. You have to wrap the function to execute in the setTimeout() or setInterval() and stop it when you reach the end of the list of items.
Here's what I came up with based on what I think you are wanting:
http://jsfiddle.net/shzBu/11/
Let me know if that's the effect you were looking for.
EDIT - I misunderstood what you wanted
Check out this site for crossfading CSS3 transitions! http://css3.bradshawenterprises.com/cfimg/

Related

how to show arrow only when hover slideshow html css javascript

I am trying to show arrows only when the mouse hover on the image.
Is there any way this can be done in CSS, html or Javascript.
Any help will be appreciated.
Thanks.
<html>
<style>
.prev {
opacity: 0;
position: absolute;
top: 34%;
left: 0;
}
.prev:hover {
opacity: 1.0;
}
.next {
opacity: 0;
position: absolute;
top: 34%;
right: 0;
}
.next:hover {
opacity: 1.0;
}
</style>
<body>
<div class="outerBox">
<img src="SliderLeftArrow.svg" alt ="Prev" class = "prev" />
<img src="SliderRightArrow.svg" alt ="Next" class = "next"/>
<img src="image1.jpg" class="imageBox" id="image_slider" />
</div>
</body>
</html>
if you want the arrows to appear when hovering over the image - one way is to have the css as follows (I've dummied up image and arrows as pure text, but the principal remains the same)
.prev,
.next
{
opacity: 0;
transition: opacity 800ms;
}
.outerBox:hover .prev,
.outerBox:hover .next
{
opacity: 1.0;
}
<div class="outerBox">
<span class="prev"><<<</span>
<span>I am an image</span>
<span class="next">>>></span>
</div>
I also added a transition to the opacity, because I like transitions :p
Add this code and your problem should be fixed.
.prev, .next {
visibility: hidden;
}
.prev:hover, .next:hover {
visibility: hidden;
}
Or this code.
.prev, .next {
color: /*whatever the background color is i.e. white*/;
}
.prev:hover, .next:hover {
color: /*something contrasting from your background color i.e. black*/;
}

Javascript button to toggle multiple css animations

I currently have a series of containers with a flip animation that activates on hover. I would like for them to not only activate on hover, but also on a javascript button click that would use a single button to toggle flip all.
HTML:
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<a href="link1.html">
<img src="images/frontimg1.jpg"/>
</a>
</div>
<div class="back">
<div class="fliplinks">
<a href="link1.html">
<p>text1</p>
</a>
</div>
</div>
</div>
</div>
These are repeated for as many objects as I use and rely on the following CSS:
.flip-container {
float:left;
margin: 7.5px;
}
/* entire container, keeps perspective */
.flip-container {
perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 210px;
height: 210px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
Edit: A jsfiddle as requested: https://jsfiddle.net/futbyyef/
Assuming that they all have the .flip-container class, you could add a function like this.
<script>
$('.toggle-button').click(function(){
$('.flip-container').toggleClass('hover');
}
</script>
Then you just need to include a button to toggle it. Something like
<button class="toggle-button">Test Button</button>
Here is a fiddle that works. Make sure to include jQuery on your page.

How to center span over image while maintaining mouseover functionality

<div class="pic">
<img src="image.jpg" height="250"/>
<span class="text" style="display:none">text here</span>
</div>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script type="text/javascript">
$('img').css('opacity', 0.4);
$('img').next('span.text').show();
$('img').bind('mouseover', function () {
$(this).css('opacity', 1.0);
$(this).next('span.text').hide();
});
$('img').bind('mouseout', function () {
$(this).css('opacity', 0.3);
$(this).next('span.text').show();
});
</script>
I have an opaque image that becomes fully visible on mouseover. I added text with span that would disappear on mouseover and reappear on mouseout similarly to the opaqueness on the image. I tried to center the text with margin-left:auto and margin-right:auto in CSS, but lacked results. Is there a way to center the text while still having the opaqueness and the text disappear on mouseover? Is Javascript the best way to do it?
Thanks
Couldn't you do this with CSS?
body {
text-align: center;
}
.pic {
display: inline-block;
margin: 25px;
border: 1px solid red;
position:relative;
}
.pic img {
display: block;
opacity: 0.4;
transition: opacity 0.5s ease;
}
.text {
opacity: 1;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
transition: opacity 0.5s ease;
}
.pic:hover img {
opacity: 1;
}
.pic:hover .text {
opacity: 0;
}
<div class="pic">
<img src="http://lorempixel.com/output/city-q-c-250-250-7.jpg" />
<span class="text">text here</span>
</div>

click on a div box with href

I have this code
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: url(games/racegame/foto/fotozonder.PNG) 0 0 no-repeat;">
</div>
<div class="back" style="background:#00B9FF;>
</div>
</div>
</div>
so when the mouse hoves above it it flips 180 so i see the back. But what i wanna do is
when the mouse hovers and you can see the back you can then click and in this case go to ispeedzone.com
someone know how to do that?
Try this:
.flip-container {
perspective: 1000;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
background: orange;
}
.back {
transform: rotateY(180deg);
background: yellow;
}
.back a {
display: block;
width: 100%;
height: 100%;
}
.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
transform: rotateY(180deg);
}
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
hover to see back
</div>
<div class="back">
http://ispeedzone.com
</div>
</div>
</div>
JSFiddle demo: http://jsfiddle.net/67ad9e8h/
It's definately easier if you provide a jsfiddle or similar. But what you could do is simply make the anchor tag span the full width by using position:relative; on its parent div, then use position:absolute; and top/right/bottom/left:0.
Alternatively if the width/height is known, just use display block on the anchor tag and set its width height to match the parent div.
I think there might be some issues in IE if the tag is empty, however you can bypass that by adding some dummy text inside the anchor tag and set its text-indent property to something crazy like -100000px to make the text non visible.

Smooth Transition On Hovering

I've been working on finding a way to change out this <img id="repair" src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg" by using a :hover with an image called repair_h.svg. What I initially was doing was placing a :hover on #repair like so #repair :hover and giving repair a background-image:url but this was not working and I think there are a few reasons why.
That was my initial process...Since that did not work I did some research on how to achieve this correctly and found a way to achieve it with JS. Which is way less hackie than some other css and html solutions I was looking into.
Using JS ended up working great for the purpose of what I need done although there's one piece that I'd like to add to this and I'm not quite sure how to do it.
I'd like to add a smooth transition between the image's when hovered on.
LINK TO MY CURRENT BUILD http://kapena.github.io/pp_web/
The icon I am working on here is called Repair Services
HTML
<li>
<a href="#">
<img id="repair" src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg"
onmouseover="this.src='http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg'"
onmouseout="this.src='http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg'" border="0" alt="About Plumbing Repairs in Honolulu Hawaii">
</img>
</a>
</li>
JS
function hover(element) {
element.setAttribute('src', 'http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg');
}
function unhover(element) {
element.setAttribute('src', 'http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg');
Also if any of you have any suggestions on away to perform a this entire task without JS and entirely with HTML and CSS then I'd be open to seeing how you'd do it :)
Thanks
You can do something like this with markup and css only:
HTML:
<a href="#">
<img id="repair" src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg" border="0"
alt="About Plumbing Repairs in Honolulu Hawaii" />
</a>
CSS:
a {
background:url('http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg') 0 0 no-repeat;
width:150px;
margin:0;
padding:0;
float:left;
}
a img {
opacity:1;
transition:opacity .5s;
float:left;
}
a:hover img {
opacity:0;
transition:opacity .5s;
}
Demo
In CSS you cannot transition/animate directly between two images becuase CSS is incapable of interpolating keyframes between two none value-scale values.
That said, there are a few approaches using only CSS.
If you need to keep the same element/id the images are being transitioned on, the only approach would be to replace the image with a non-replaced element so you can use pseudo elements, then do e.g.:
span {
display: inline-block;
position: relative;
}
span:before,
span:after {
display: inline-block;
height: 300px;
width: 300px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
span:before {
content: url(http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg);
}
span:after {
opacity: 1;
transition: opacity 200ms ease-in;
content: url(http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg);
}
span:hover:after {
opacity: 0;
}
<span></span>
Alternatively if this isnt a consideration, a common approach is to overlap two images and transition the opacity of the correct image on hover, revealing the image underneath.
div:hover img:last-of-type {
opacity: 1;
transition: opacity 200ms ease-in;
}
div:hover img:last-of-type {
opacity: 0;
}
div img {
position: absolute;
top: 0;
left: 0;
}
<div>
<img src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg" />
<img src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg" />
</div>
If you remove the blue background from the image(s) and keep it transparent, you can do this easily with css:
<style type="text/css">
ul {
list-style: none;
}
a {
display: inline-block;
width: 230px;
height: 240px;
background-color: #8bdafc;
/* background-image: url(/path/to/img/with-transparent-bg.svg) */
background-repeat: no-repeat;
-webkit-transition: background-color .3s;
-moz-transition: background-color .3s;
-o-transition: background-color .3s;
transition: background-color .3s;
}
a:hover {
background-color: #4fc3fb;
}
</style>
<ul>
<li>
</li>
</ul>
Don't set an src attribute on the img
<img src='' width=500 height=500>
img{
background: url("src1");
}
img:hover{
background: url("src2");
}

Categories

Resources