Javascript Fade Into New Image When Clicked

Javascript Fade Into New Image When Clicked - javascript

Right now I have a code to switch between two images when clicking text, but I'd like to create a function where I can click on the image itself and it fades into the next one, and be able to do this with more than two images. Also the images I want to use vary in width and height, but all have a max height and width of 600px. Here's my current code:
HTML:
<div id="cf2" class="shadow">
<img class="bottom" src="/images/Cirques.jpg" />
<img class="top" src="/images/Clown%20Fish.jpg" />
</div>
<p id="cf_onclick">Click me to toggle</p>
CSS:
#cf2 {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf2 img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf2 img.transparent {
opacity:0;
}
#cf_onclick {
cursor:pointer;
}
JavaScript:
$(document).ready(function() {
$("#cf_onclick").click(function() {
$("#cf2 img.top").toggleClass("transparent");
});
});

Try adding #cf2 img to selector initiating click event
$("#cf_onclick, #cf2 img")
$(document).ready(function() {
var n = -1
, imgs = $("#cf2 img")
, fx = function(i, el) {
return (el || imgs.eq(i)).fadeToggle(1000);
};
$("#cf_onclick, #cf2 img").click(function() {
if (n === (-imgs.length)) {
fx(n);
n = -1;
fx(null, imgs);
} else {
fx(n);
--n
};
});
});
#cf2 {
position: relative;
height: 281px;
width: 450px;
margin: 0 auto;
}
#cf2 img {
position: absolute;
left: 0;
}
#cf_onclick {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="cf2" class="shadow">
<img class="bottom" src="http://lorempixel.com/400/400/cats" />
<img class="top" src="http://lorempixel.com/400/400/technics" />
<img class="top" src="http://lorempixel.com/400/400/nature" />
<img class="top" src="http://lorempixel.com/400/400/animals" />
</div>
<p id="cf_onclick">Click me to toggle</p>

This will work for multiple images:
$(document).ready(function() {
$.fn.nextOrFirst = function (selector) {
var next = this.next(selector);
return (next.length) ? next : this.prevAll(selector).last();
};
$("#cf2 img").click(function() {
$(this)
.removeClass('visible')
.nextOrFirst()
.addClass('visible');
});
});
#cf2 {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf2 img {
position:absolute;
left:0;
max-height: 600px;
max-width: 600px;
opacity: 0;
z-index: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf2 img.visible {
opacity: 1;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cf2" class="shadow">
<img class="visible" src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" alt="1"/>
<img src="http://economictimes.indiatimes.com/thumb/msid-45891755,width-640,resizemode-4/nasas-images-of-most-remarkable-events-you-cant-miss.jpg" alt="2"/>
<img src="http://i.dailymail.co.uk/i/pix/2013/11/03/article-2486855-192ACC5200000578-958_964x682.jpg" alt="3"/>
<img src="http://mstatic.mit.edu/nom150/items/199-HybridImage.jpg" alt="4"/>
</div>
Instead of having an .invisible class, I used a .visible class, which also has a z-index of 1, greater than that of the default images. So the image that has that class, will be visible, while the others will have opacity: 0 by default.
I also extended the jQuery object to have a nextOrFirst method (which I stole from here), so that when the visible image is the last one of the images in the stack, the next one will be the first. So now, the order of the images, as they appear, goes from top to bottom.
I decided to do it like this in order to keep your CSS transitions, but you can also use jQuery's fadeIn and fadeOut methods.

Something like this should do it:
$(document).ready(function() {
$("#cf_onclick").click(function() {
var current = $("#cf2 img.top").removeClass('top');
var next = current.next();
next = next.length ? next : current.siblings().first();
next.addClass('top');
});
});
#cf2 {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf2 img {
position:absolute;
left:0;
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf2 img.top {
opacity: 1;
}
#cf_onclick {
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="cf_onclick">Click me to toggle</p>
<div id="cf2" class="shadow">
<img src="http://icons.iconarchive.com/icons/google/chrome/256/Google-Chrome-icon.png" />
<img class="top" src="http://icons.iconarchive.com/icons/kyo-tux/aeon/256/Apps-Safari-icon.png" />
</div>

Related

Element will not go away using click() method to transition element opacity

I am trying to program the element with an ID of "opacity" to change its opacity from 1 to 0 upon clicking the element. But then I click the element, nothing happens. What am I doing wrong?
#message {
height: 300px;
width: 300px;
background-color: rgb(255, 10, 10, .5);
overflow: scroll;
}
.box {
background-color: blue;
}
#background {
background-color: red;
}
.submenu {
background-color: purple;
color: green;
width: 150px;
}
.option {
background-color: cyan;
}
#dashboard {
margin-left: -70px;
background-color: blue;
width: 80px;
border: 5px solid;
}
#opacity {
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
img.faded {
opacity: 0;
}
<!DOCTYPE html>
<!-- The above DOCTYPE declaration tells the browser that this page conforms to HTML 5 standards -->
<head>
<meta http-equiv="author" content="Chris" />
<link href="jquery.css" type="text/css" rel="stylesheet" />
<script src="jquery.js"></script>
<script>
$(function() {
jQuery('#one').hide();
jQuery('#fadeToggle').click(function() {
jQuery('#one').fadeToggle(500);
});
jQuery('#fadeTo').click(function() {
jQuery('#two').fadeTo(500, .5);
});
jQuery('#congrats').animate({
marginLeft: '+=1200px',
},
10000,
);
jQuery('#congrats').fadeOut(11000);
jQuery('#opacity').click(function() {
jQuery(this).addClass('faded');
});
});
</script>
</head>
<body>
<div id="one">
<p>This is the fadeToggle() method carrying out a "well-defined operation on data," the jQuery object ('#box'), in this case. The parameter is "500," which stands for half a second.</p>
</div>
<input type="submit" id="fadeToggle" value="fadeToggle()" />
<div id="two">
<p>This is the fadeTo() method.</p>
</div>
<input type="submit" id="fadeTo" value="fadeToggle()" />
<div id="heading">
<img id="congrats" src="congrats.gif" />
</div>
<img id="opacity" src="congrats.gif" />
</body>
</html>
I am trying to program the element with an ID of "opacity" to change its opacity from 1 to 0 upon clicking the element. But then I click the element, nothing happens. What am I doing wrong?
Thanks.

You just need to update the css. Your css #opacity is overwriting your img.faded. All you need to do is #opacity.faded JSBin
#opacity.faded {
opacity: 0;
}

You have an id that is setting opacity: 1 and then you're adding a class with opacity: 0, this creates a conflict.
If you wanted to make a simple change to this, then you can just add !important to your faded class css so it takes presidents over the id.
Like this:
.faded {
opacity: 0 !important;
}

You need to use the jQuery .css() method to set the opacity to 0.
This is because in your CSS stylesheet, you have given #opacity an opacity of 1, which can not be overriden by adding another class with an opacity of 0. You have to add an inline style to override the CSS properties set in the stylesheet with .css().
#message {
height: 300px;
width: 300px;
background-color: rgb(255, 10, 10, .5);
overflow: scroll;
}
.box {
background-color: blue;
}
#background {
background-color: red;
}
.submenu {
background-color: purple;
color: green;
width: 150px;
}
.option {
background-color: cyan;
}
#dashboard {
margin-left: -70px;
background-color: blue;
width: 80px;
border: 5px solid;
}
#opacity {
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
img.faded {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<!-- The above DOCTYPE declaration tells the browser that this page conforms to HTML 5 standards -->
<head>
<meta http-equiv="author" content="Chris" />
<script>
$(function() {
jQuery('#one').hide();
jQuery('#fadeToggle').click(function() {
jQuery('#one').fadeToggle(500);
});
jQuery('#fadeTo').click(function() {
jQuery('#two').fadeTo(500, .5);
});
jQuery('#congrats').animate({
marginLeft: '+=1200px',
},
10000,
);
jQuery('#congrats').fadeOut(11000);
jQuery('#opacity').click(function() {
jQuery(this).css("opacity", "0");
});
});
</script>
</head>
<body>
<div id="one">
<p>This is the fadeToggle() method carrying out a "well-defined operation on data," the jQuery object ('#box'), in this case. The parameter is "500," which stands for half a second.</p>
</div>
<input type="submit" id="fadeToggle" value="fadeToggle()" />
<div id="two">
<p>This is the fadeTo() method.</p>
</div>
<input type="submit" id="fadeTo" value="fadeToggle()" />
<div id="heading">
<img id="congrats" src="congrats.gif" />
</div>
<img id="opacity" src="congrats.gif" />
</body>
</html>
You can make the opacity rule in .faded more important by adding !important.
#message {
height: 300px;
width: 300px;
background-color: rgb(255, 10, 10, .5);
overflow: scroll;
}
.box {
background-color: blue;
}
#background {
background-color: red;
}
.submenu {
background-color: purple;
color: green;
width: 150px;
}
.option {
background-color: cyan;
}
#dashboard {
margin-left: -70px;
background-color: blue;
width: 80px;
border: 5px solid;
}
#opacity {
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
img.faded {
opacity: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<head>
<meta http-equiv="author" content="Chris" />
<script>
$(function() {
jQuery('#one').hide();
jQuery('#fadeToggle').click(function() {
jQuery('#one').fadeToggle(500);
});
jQuery('#fadeTo').click(function() {
jQuery('#two').fadeTo(500, .5);
});
jQuery('#congrats').animate({
marginLeft: '+=1200px',
},
10000,
);
jQuery('#congrats').fadeOut(11000);
jQuery('#opacity').click(function() {
jQuery(this).addClass("faded");
});
});
</script>
</head>
<body>
<div id="one">
<p>This is the fadeToggle() method carrying out a "well-defined operation on data," the jQuery object ('#box'), in this case. The parameter is "500," which stands for half a second.</p>
</div>
<input type="submit" id="fadeToggle" value="fadeToggle()" />
<div id="two">
<p>This is the fadeTo() method.</p>
</div>
<input type="submit" id="fadeTo" value="fadeToggle()" />
<div id="heading">
<img id="congrats" src="congrats.gif" />
</div>
<img id="opacity" src="congrats.gif" />
</body>
</html>

The faded class will not change the opacity attribute since there's a direct rule related to #opacity element that force the opacity attribute value to be 1 :
#opacity {
opacity: 1;
____^^^^^^^^^^
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
That will be always applied since according to the specificity hierarchy the id attribute has more weight than the class, to force the class rule you could use !important :
img.faded {
opacity: 0.5 !important;
}
$(function() {
jQuery('#opacity').click(function() {
jQuery(this).addClass('faded');
});
});
#opacity {
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
img.faded {
opacity: 0.5 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div>
<img id="opacity" src="congrats.gif" />
You could write a more specific rule using the id #opacity like :
img#opacity.faded {
opacity: 0.5;
}
$(function() {
jQuery('#opacity').click(function() {
jQuery(this).addClass('faded');
});
});
#opacity {
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
img#opacity.faded {
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div>
<img id="opacity" src="congrats.gif" />
I prefer the use of css() method to set the opacity instead, like :
jQuery(this).css({opacity: 0});
$(function() {
jQuery('#opacity').click(function() {
jQuery(this).css({
opacity: 0
});
});
});
#opacity {
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
img.faded {
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div>
<img id="opacity" src="congrats.gif" />

jquery change image src on click, and revert to original image on second click

Long time lurker.. first post.
I'm looking to make a play/pause button that animates on hover,
and that changes from 'play' to 'pause' button on click.
(I'm using it to trigger an audiofile)
i have this working by stacking two different coloured images and have a transition in CSS (opacity) on mouse over.
I have been struggling to change the src on click in javascript/jquery, which i managed to get to work (play button turns into pause button, css transition still functional) but i have no clue how to make a conditional if/then statement to have it revert back to the original 'play' button images on the next click.
I've tried quite a few things and feel that i'm close, but since i have little to no experience in javascript/jquery, I have no clue how to proceed.
I hope that my question is somewhat understandable and I'd very much appreciate any help i can get!
$("document").ready(function() {
$("#playpause").click(function() {
$("#top").attr("src", "//placehold.it/100?text=play");
$("#bottom").attr("src", "//placehold.it/100?text=pause");
});
});
#playpause {
position: relative;
height: 24px;
width: 24px;
margin: 5px 10px 0 0;
}
#playpause img {
position: absolute;
left: 0;
-webkit-transition: opacity 0.7s ease-in-out;
-moz-transition: opacity 0.7s ease-in-out;
-o-transition: opacity 0.7s ease-in-out;
transition: opacity 0.7s ease-in-out;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
#playpause img.top:hover {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="playpause" class="one column">
<a id="flytonight" href="#">
<img class="bottom" id="bottom" src="//placehold.it/100?text=play" />
<img class="top" id="top" src="//placehold.it/100?text=pause" />
</a>
</div>

You just need to check the current src attribute in each click, and change it accordingly. You will be always switching between the two src values.
$("document").ready(function() {
$("#playpause img").click(function() {
if ($(this).attr("src") === "//placehold.it/100?text=play")
$(this).attr("src", "//placehold.it/100?text=pause");
else if ($(this).attr("src") === "//placehold.it/100?text=pause")
$(this).attr("src", "//placehold.it/100?text=play");
});
});
Demo:
$("document").ready(function() {
$("#playpause img").click(function() {
if ($(this).attr("src") === "//placehold.it/100?text=play")
$(this).attr("src", "//placehold.it/100?text=pause");
else if ($(this).attr("src") === "//placehold.it/100?text=pause")
$(this).attr("src", "//placehold.it/100?text=play");
});
});
#playpause {
position: relative;
height: 24px;
width: 24px;
margin: 5px 10px 0 0;
}
#playpause img {
position: absolute;
left: 0;
-webkit-transition: opacity 0.7s ease-in-out;
-moz-transition: opacity 0.7s ease-in-out;
-o-transition: opacity 0.7s ease-in-out;
transition: opacity 0.7s ease-in-out;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="playpause" class="one column">
<a id="flytonight" href="#">
<img class="bottom" id="bottom" src="//placehold.it/100?text=play" />
</a>
</div>

I'm sorry I did not pay enough attention to your question, this would be a solution:
var playToggle = false;
$("#playpause").click(function() {
if (playToggle === true){
$("#top").attr("src", "//placehold.it/100?text=play");
$("#bottom").attr("src", "//placehold.it/100?text=pause");
else{
$("#bottom").attr("src", "//placehold.it/100?text=play");
$("#top").attr("src", "//placehold.it/100?text=pause");
}
playToggle = !playToggle;
});

Javascript Slideshow Glitches When Clicking Empty Space Around Image

So I got this slideshow code working, where when you click an image, it fades into another image. However, if, for example, there was a vertical orientated image with empty space on its right, if you click that space the whole slideshow kind of glitches out.
Here's my website where you can test it out:
http://danielshultz.github.io
The code:
$(document).ready(function() {
$.fn.nextOrFirst = function (selector) {
var next = this.next(selector);
return (next.length) ? next : this.prevAll(selector).last();
};
$("#cf2 img").click(function() {
$(this)
.removeClass('visible')
.nextOrFirst()
.addClass('visible');
});
});
CSS:
#cf2 {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf2 img {
position:absolute;
left:0;
max-height: 600px;
max-width: 600px;
opacity: 0;
z-index: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf2 img.visible {
opacity: 1;
z-index: 1;
}
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cf2" class="shadow">
<img class="visible" src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" alt="1"/>
<img src="http://economictimes.indiatimes.com/thumb/msid-45891755,width-640,resizemode-4/nasas-images-of-most-remarkable-events-you-cant-miss.jpg" alt="2"/>
<img src="http://i.dailymail.co.uk/i/pix/2013/11/03/article-2486855-192ACC5200000578-958_964x682.jpg" alt="3"/>
<img src="http://mstatic.mit.edu/nom150/items/199-HybridImage.jpg" alt="4"/>
</div>

If i understood, the problem here is when you click outside the image but inside the square of the previous image, then the slide does not change.
This approach, makes no changes in yout javascript but changes the html and some selectors.
In the example below, I wrapped each <img> into a '<div>' and changed the selectors to match with those divisions. Minor stylings too.
So, if you click outside the image but over the div, the slide changes as expected.
$(document).ready(function() {
$.fn.nextOrFirst = function (selector) {
var next = this.next(selector);
return (next.length) ? next : this.prevAll(selector).last();
};
$("#cf2 div.holder").click(function() {
$(this)
.removeClass('visible')
.nextOrFirst()
.addClass('visible');
});
});
body {
font-family: verdana;
font-size: 8pt;
color: #000;
}
#cf2 {
position: relative;
height: 600px;
width: 600px;
margin: 0 auto;
}
#cf2 div.holder {
position: absolute;
left: 0;
height: 600px;
width: 600px;
opacity: 0;
z-index: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf2 div.holder img {
max-height: 600px;
max-width: 600px;
}
#cf2 div.holder.visible {
opacity: 1;
z-index: 1;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<td valign="center">
<div id="cf2" class="shadow">
<div class="holder visible">
<img src="//danielshultz.github.io/Images/Cute-Door-1.jpg" alt="1"/></div>
<div class="holder"><img src="//danielshultz.github.io/Images/Cute-Door-2.jpg" alt="2"/></div>
<div class="holder"><img src="//danielshultz.github.io/Images/Cute-Door-3.jpg" alt="3"/></div>
</div>
</td>
</table>

Sliding div using css3 translate

I'm trying to slide a menu and container either left or right using css3 translate. But on clicking on toggle, the menu span appears to slide pretty fast and the container appears to slide to left slowly. Have I written the css styles properly ?
CSS
.animate-left,.animate-left-container {
transition: all .6s ease-out 0.2s;
}
.animate-left-container {
-webkit-transform: translateX(0px);
}
.animate-right,.animate-right-container {
transition: all .6s ease-in 0.2s;
}
.animate-right-container {
-webkit-transform: translateX(0px);
}
.animate-left {
-webkit-transform: translateX(-45px);
margin-left: -45px;
}
.animate-right{
-webkit-transform: translateX(0);
margin-left: 0px;
}
JS
var container = $(".app-data-container").children();
$('.nav-toggle-button-container').on('click',function(e){
var x = $(container[0]), y= $(container[1]);
if(x.hasClass('animate-left') && y.hasClass('animate-left-container')) {
x.removeClass('animate-left').addClass('animate-right');
y.removeClass('animate-left-container').addClass('animate-right-container');
}else if(x.hasClass('animate-right')){
x.removeClass('animate-right').addClass('animate-left');
y.removeClass('animate-right-container').addClass('animate-left-container');
}else{
x.addClass('animate-left');
y.addClass('animate-left-container');
}
});
Demo : http://jsfiddle.net/2b9e8bq9/

It took a little bit, but I created an example which I hope helps and can, perhaps, simplify your code overall.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="UTF-8">
<style type="text/css">
.rate-100pxs, .rate-200pxs {
-webkit-transition: all 1s ease 0;
-moz-transition: all 1s ease 0;
-o-transition: all 1s ease 0;
transition: all 1s ease 0;
}
#cell-1, #cell-2 {
display:inline-block;
position:relative;
width:200px;
}
h1 {
white-space:pre;
font-size:20px;
}
.animation-box {
position:relative;
background:#eee;
}
.animation-box .rate-200pxs {
left:200px;
}
.animation-box:hover .rate-200pxs {
left:0px;
}
.animation-box .rate-100pxs {
left:200px;
}
.animation-box:hover .rate-100pxs {
left:100px;
}
</style>
</head>
<body>
<h1>Distance: 200px Duration: 1s Rate:200 px/s</h1>
<div class="animation-box">
<div id="cell-1" class="rate-200pxs">Cell 1</div><div id="cell-2" class="rate-200pxs">Cell 2</div>
</div>
<h1>Distance: 100px/200px Duration: 1s Rate:100 px/s & 200 px/s</h1>
<div class="animation-box">
<div id="cell-1" class="rate-100pxs">Cell 1</div><div id="cell-2" class="rate-200pxs">Cell 2</div>
</div>
</body>
</html>

Fade one image into another using css or jquery

I need to be able to fade in a second image above the initial image on hover. I need to make sure that second image isn't visible initially until it fades in. The other important note is that neither of the images should fade out entirely at any time. I've tried several approaches such as using 1 image, 2 images, jquery animate and css transition.
I've read that it is possible to animate a change of attribute using jquery? If this is true, how could I animate the change of 'src' in img using jquery?
$(".image").mouseenter(function() {
var img = $(this);
var newSrc = img.attr("data-hover-src");
img.attr("src",newSrc);
img.fadeTo('slow', 0.8, function() {
img.attr("src", newSrc);
});
img.fadeTo('slow', 1);
}).mouseleave(function() {
var img = $(this);
var newSrc = img.attr("data-regular-src");
img.fadeTo('slow', 0.8, function() {
img.attr("src", newSrc);
});
img.fadeTo('slow', 1);
});
This is what i'm currently using. It's the closest i've gotten. But you can see the image change which is not desirable.

Using a single html element with background images
HTML - doesn't get simpler than this
<div id="imgHolder"></div>
CSS
#imgHolder {
width: 200px;
height: 200px;
display: block;
position: relative;
}
/*Initial image*/
#imgHolder::before {
content:"";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
background-image:url(http://placehold.it/200x200);
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
z-index:10;
}
#imgHolder:hover::before {
opacity:0;
}
#imgHolder::after {
content:"";
background: url(http://placehold.it/200x200/FF0000);
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Demo
OR if you want to use image tags...
Stealing straight from: http://css3.bradshawenterprises.com/cfimg/
HTML
<div id="cf">
<img class="bottom" src="pathetoImg1.jpg" />
<img class="top" src="pathetoImg2.jpg" />
</div>
CSS
#cf {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity:0;
}
There are many other examples in the link as well to play with, but this will get you started.
Final Opacity
You've mentioned you don't want the initial image to disapear comletely. To do this change opacity:0 to opacity:0.5 or something similar. You'll need to experiment with that value to get the result you want.
Demo with final opacity of 0.8
Dynamic Image Sizes
I think you will be stuck with the two image version for this if just using CSS. HTML is the same.
CSS
#cf {
position:relative;
}
#cf img {
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.bottom {
z-index:-1;
opacity:0;
position:absolute;
left:0;
}
#cf:hover img.top {
opacity:0.8;
}
#cf:hover img.bottom {
display:block;
opacity:1;
}
Demo

Develop Reference

JavaScript is the programming language of the Web.

Javascript Fade Into New Image When Clicked - javascript

Related

Element will not go away using click() method to transition element opacity

jquery change image src on click, and revert to original image on second click

Javascript Slideshow Glitches When Clicking Empty Space Around Image

Sliding div using css3 translate

Fade one image into another using css or jquery

Categories

Resources