Develop Reference

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

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/

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>

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");
}

How to remove hover state

1) I created an image with an opacity of 1. When you hover over it, the opacity becomes .3 and a button appears over the image. The problem, is that when you hover over the button, the opacity of the image returns to 1. How can I make the opacity of the image stay .3 when the hover is both over the image OR the button?
2) When you click play, the original image changes to a new image. But since the mouse is over the image, the new image has an opacity .3. How can I set the new image to have an opacity of 1 even when its hovered?
var originalImgSrc = $('img').attr('src');
// Change image on button click
$(".the-buttons").click(function() {
$('img').attr("src", "https://s3.amazonaws.com/blitzbase-assets/assets/2.gif");
$(this).addClass("hide");
});
//Restore image on mouse out
$('.show-image img').mouseout(function() {
$('img').attr("src", originalImgSrc);
$('.the-buttons').removeClass("hide");
});
div.show-image {
position: relative;
float: left;
margin: 0px;
padding: 0px;
background: #333;
}
div.show-image img {
opacity: 1;
background: white;
}
div.show-image img:hover {
opacity: .3;
-webkit-transition: opacity .2s ease-in-out;
}
div.show-image:hover input {
display: block;
}
div.show-image input {
position: absolute;
display: none;
top: 100px;
left: 100px;
}
div.show-image input.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show-image">
<img src="https://via.placeholder.com/100.png/09f/fff" />
<input class="the-buttons" type="button" value="Play" />
</div>

Here's a fiddle
Here's the answer to both of your questions.
Put the hover on the parent:
.show-image:hover img
Add the "hide" class on the parent and change the opacity that way.
$(this).parent().addClass("hide");
div.show-image.hide img{
opacity: 1;
}
To add the play button back on hover after clicking the first time you would have to remove the hide class from the parent in your mouse out function:
$('.the-buttons').parent().removeClass("hide");

change your css
from this:
div.show-image img:hover {
opacity: .3;
-webkit-transition: opacity .2s ease-in-out;
}
to this:
div.show-image:hover img {
opacity: .3;
-webkit-transition: opacity .2s ease-in-out;
}
Hope this helps. Full snippet:
var originalImgSrc = $('img').attr('src');
// Change image on button click
$(".the-buttons").click(function() {
$('img').attr("src", "https://s3.amazonaws.com/blitzbase-assets/assets/2.gif");
$(this).addClass("hide");
});
//Restore image on mouse out
$('.show-image img').mouseout(function() {
$('img').attr("src", originalImgSrc);
$('.the-buttons').removeClass("hide");
});
div.show-image {
position: relative;
float: left;
margin: 0px;
padding: 0px;
background: #333;
}
div.show-image img {
opacity: 1;
background: white;
}
div.show-image:hover img {
opacity: .3;
-webkit-transition: opacity .2s ease-in-out;
}
div.show-image:hover input {
display: block;
}
div.show-image input {
position: absolute;
display: none;
top: 100px;
left: 100px;
}
div.show-image input.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show-image">
<img src="https://via.placeholder.com/100.png/09f/fff" />
<input class="the-buttons" type="button" value="Play" />
</div>

I removed your opacity from the CSS, and placed it within your jQuery function. I also replaced your event handler with .hover(), and targeted the parent container.
$('.show-image').hover(
function() {
$(this)
.find('img').css('opacity', '.3').end()
.find('input').show();
}, function() {
$(this)
.find('img').css('opacity', '1').attr("src", originalImgSrc).end()
.find('input').hide();
}
);
var originalImgSrc = $('img').attr('src');
// Change image on button click
$(".the-buttons").click(function() {
$('img').attr("src", "https://s3.amazonaws.com/blitzbase-assets/assets/2.gif").css('opacity', 1);
$(this).hide();
});
$('.show-image').hover(
function() {
$(this)
.find('img').css('opacity', '.3').end()
.find('input').show();
},
function() {
$(this)
.find('img').css('opacity', '1').attr("src", originalImgSrc).end()
.find('input').hide();
}
);
div.show-image {
position: relative;
float: left;
margin: 0px;
padding: 0px;
background: #333;
}
div.show-image img {
background: white;
}
div.show-image:hover input {
display: block;
}
div.show-image input {
position: absolute;
display: none;
top: 100px;
left: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show-image">
<img src="https://via.placeholder.com/100.png/09f/fff" />
<input class="the-buttons" type="button" value="Play" />
</div>
Also, note the update I made to restore opacity on clicking 'Play'.

You can use mouseover/mouseout events to add/remove class and add css to that class, I added the .hovered class.
var originalImgSrc = $('img').attr('src');
// Change image on button click
$(".the-buttons").click(function() {
$('img').attr("src", "https://s3.amazonaws.com/blitzbase-assets/assets/2.gif");
$(this).addClass("hide");
});
function addHOVER() {
$('.show-image img').addClass("hovered");
}
function remHOVER() {
$('.show-image img').removeClass("hovered");
}
$(".show-image img").mouseover(addHOVER);
$(".show-image .the-buttons").mouseover(addHOVER);
$(".show-image .the-buttons").mouseout(remHOVER);
//Restore image on mouse out
$('.show-image img').mouseout(function() {
$('img').attr("src", originalImgSrc);
remHOVER();
$('.the-buttons').removeClass("hide");
});
div.show-image {
position: relative;
float: left;
margin: 0px;
padding: 0px;
background: #333;
}
div.show-image img {
opacity: 1;
background: white;
}
div.show-image img.hovered {
opacity: .3;
-webkit-transition: opacity .2s ease-in-out;
}
div.show-image:hover input {
display: block;
}
div.show-image input {
position: absolute;
display: none;
top: 100px;
left: 100px;
}
div.show-image input.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show-image">
<img src="https://via.placeholder.com/100.png/09f/fff" />
<input class="the-buttons" type="button" value="Play" />
</div>

JQUERY image overlay fadeIn() fades in and out when mouseover

I am looking to get a nice smooth rollover image to fadeIn over the parent image for a set of buttons.
I have my overlay image stacked ontop of my main image, and it's set to "display: none;".
I have the following jQuery, and it works to FadeIn the overlay image, but it fades it in and out repeatedly when the mouse is over the image. Do I have something wrong in the syntax for my jQuery? Thanks in advance.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".main").mouseenter(function() {
jQuery(".overlay").fadeIn();
});
jQuery(".main").mouseleave(function() {
jQuery(".overlay").fadeOut();
});
});
</script>
and my HTML code:
<style type="text/css">
<!--
.hoverbox { position: relative; }
.main { width: 243px; height: 117px; }
.overlay { position: absolute; width: 243px; height: 117px; top: 0; left: 0; display: none; }
-->
</style>
<!-- button 1 -->
<div class="hoverbox" style="float: left; width: 243px; height: 117px;">
<a href="/locations/sacramento-international-airport/">
<img class="main" src="/images/home-button-smf_orig.jpg" />
<img class="overlay" src="/images/home-button-smf_rollover.jpg" />
</a>
</div>
<!-- end button 1 -->

Try this instead:
<script>
$(document).ready(function() {
$(".hoverbox").on("mouseenter", function(){
$(".overlay").stop(true, true).fadeIn();
});
$(".hoverbox").on("mouseleave", function(){
$(".overlay").stop(true, true).fadeOut();
});
});
</script>
I think hovering over the image itself was a bad idea, here I use the parent container. Also, using the on() method is now the preferred way to trigger mouse enter and leave events.
Good luck!

Michael's answer is a good one and will work, but it may be preferable to use CSS transitions for the animation and reserve jQuery for the behavior.
Here's a demo.
JavaScript
$(".hoverbox")
.mouseenter(function () {
$(this).addClass("on");
})
.mouseleave(function () {
$(this).removeClass("on");
});
CSS
.overlay {
opacity: 0;
position: absolute;
top: 0;
left: 0;
-webkit-transition: .4s;
-moz-transition: .4s;
-o-transition: .4s;
-transition: .4s;
}
.hoverbox.on .overlay {
opacity: 1;
}
Here's a demo of the former approach (similar to Michael's answer). Also, your CSS has been cleaned up for both examples.

css is enough in this case, try the below code
.main:hover + .overlay{ display:block; }
and make sure overlay has a higher z-index
.overlay {
position: absolute; width: 243px; height: 117px;
top: 0; left: 0; display: none; z-index: 2;
}
http://jsfiddle.net/Grhqn/1/
for graceful fading
.overlay {
position: absolute; width: 243px; height: 117px; top: 0;
left: 0; z-index: 2; transition: opacity 1.5s ease; opacity:0;
}
.overlay:hover { opacity:1; }
http://jsfiddle.net/Grhqn/3/