How can I fade one image into another with jquery? As far as I can tell you would use fadeOut, change the source with attr() and then fadeIn again. But this doesn't seem to work in order. I don't want to use a plugin because I expect to add quite a few alterations.
Thanks.
In the simplest case, you'll need to use a callback on the call to fadeOut().
Assuming an image tag already on the page:
<img id="image" src="http://sstatic.net/so/img/logo.png" />
You pass a function as the callback argument to fadeOut() that resets the src attribute and then fades back using fadeIn():
$("#image").fadeOut(function() {
$(this).load(function() { $(this).fadeIn(); });
$(this).attr("src", "http://sstatic.net/su/img/logo.png");
});
For animations in jQuery, callbacks are executed after the animation completes. This gives you the ability to chain animations sequentially. Note the call to load(). This makes sure the image is loaded before fading back in (Thanks to Y. Shoham).
Here's a working example
$("#main_image").fadeOut("slow",function(){
$("#main_image").load(function () { //avoiding blinking, wait until loaded
$("#main_image").fadeIn();
});
$("#main_image").attr("src","...");
});
Well, you can place the next image behind the current one, and fadeOut the current one so that it looks like as though it is fading into the next image.
When fading is done, you swap back the images. So roughly:
<style type="text/css">
.swappers{
position:absolute;
width:500px;
height:500px;
}
#currentimg{
z-index:999;
}
</style>
<div>
<img src="" alt="" id="currentimg" class="swappers">
<img src="" alt="" id="nextimg" class="swappers">
</div>
<script type="text/javascript">
function swap(newimg){
$('#nextimg').attr('src',newimg);
$('#currentimg').fadeOut(
'normal',
function(){
$(this).attr('src', $('#nextimg').attr('src')).fadeIn();
}
);
}
</script>
Are you sure you're using the callback you pass into fadeOut to change the source attr and then calling fadeIn? You can't call fadeOut, attr() and fadeIn sequentially. You must wait for fadeOut to complete...
Old question but I thought I'd throw in an answer. I use this for the large header image on a homepage. Works well by manipulating the z-index for the current and next images, shows the next image right under the current one, then fades the current one out.
CSS:
#jumbo-image-wrapper
{
width: 100%;
height: 650px;
position: relative;
}
.jumbo-image
{
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
HTML:
<div id="jumbo-image-wrapper">
<div class="jumbo-image" style="background-image: url('img/your-image.jpg');">
</div>
<div class="jumbo-image" style="background-image: url('img/your-image-2'); display: none;">
</div>
</div>
Javascript (jQuery):
function jumboScroll()
{
var num_images = $("#jumbo-image-wrapper").children(".jumbo-image").length;
var next_index = jumbo_index+1;
if (next_index == num_images)
{
next_index = 0;
}
$("#jumbo-image-wrapper").children(".jumbo-image").eq(jumbo_index).css("z-index", "10");
$("#jumbo-image-wrapper").children(".jumbo-image").eq(next_index).css("z-index", "9");
$("#jumbo-image-wrapper").children(".jumbo-image").eq(next_index).show();
$("#jumbo-image-wrapper").children(".jumbo-image").eq(jumbo_index).fadeOut("slow");
jumbo_index = next_index;
setTimeout(function(){
jumboScroll();
}, 7000);
}
It will work no matter how many "slides" with class .jumbo-image are in the #jumbo-image-wrapper div.
For those who want the image to scale according to width percentage (which scale according to your browser width), obviously you don't want to set height and width in PIXEL in CSS.
This is not the best way, but I don't want to use any of the JS plugin.
So what can you do is:
Create one same size transparent PNG and put an ID to it as
second-banner
Name your original image as first-banner
Put both of them under a DIV
Here is the CSS structure for your reference:
.design-banner {
position: relative;
width: 100%;
#first-banner {
position: absolute;
width: 100%;
}
#second-banner {
position: relative;
width: 100%;
}
}
Then, you can safely fade out your original banner without the content which placed after your image moving and blinking up and down
Related
I'm facing an issue with sliding an image from left to right.
What do I want: Image should slide from the left side of the screen to the right side.
My code is:
$('image').show("slide", { direction: "right" }, 1200);
But this solution is not working a per the expectations. Image slides from left to right, but not the whole image is loaded and the full image is visible only at the end of the animation.
here you can check:
$('#hello').show('slide', {direction: 'right'}, 1000);
you can also use: toggle
$(".slide-toggle").click(function(){
$(".box").animate({
width: "toggle"
});
or:
$(".slidingDiv").toggle("slide");
you can use animate instead of show as using show will show complete image after the animation
$('#image').animate({right:'0px'},1200)
img{
width: 100px;
height: 100px;
position: absolute
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"/>
I think your problem is that the animation started before image object was loaded completely to the browser.
You should check out jquery load event: https://api.jquery.com/load-event/
And search for answers for question "jquery image load callback",
e.g.: jQuery or Javascript check if image loaded
In my opinion the best way is create image object with JS, push it to DOM element and start animation, when image will be loaded completely.
In short:
$("<img/>")
.attr("src", "/images/your-image.jpg")
.on('load', function() { startAnimation() })
.appendTo($('#imageContainer'));
var startAnimation = function(){
$('#hello').show('slide', {direction: 'right'}, 1000);
}
$(document).ready(function() {
$("img").animate({
marginLeft: "0px"
}, 2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="frame" style="width: 300px; height:300px; overflow:hidden;">
<img id="image" src="https://www.filterforge.com/more/help/images/size400.jpg" style='margin-left:-300px; height: 100%; width: 100%; '>
</img>
</div>
Im having this proplem with an iframe that from JavaScript uses .load every 20 sec, and its allways moving the site in a short sec like pops up and then down,
are there somehow i can get it to hold its position??
You can see what i mean by looking at the ads on this site - http://www.pixel.tv/
the code im using to refresh it is this one
var adforsidetop = setInterval(function () {
$('#forsidetop').fadeOut('slow', function() {
$(this).load('/adsrefresh/forsidetop.html', function() {
$(this).fadeIn('slow');
});
});
}, 20000); // milliseconds
So how can i get it to hold the frame ? without its popping the site
Problem with this is that when element is faded out element css display: is set to none, one way is to add code to set iFrame visibility: hidden or you can simply crate div that contains your iFrame
<div id="iframe-container">
<iframe></iframe>
</div>
and set css for div to be same as iframe
#iframe-container {
height: xxxpx;
width: xxxpx;
}
change your style in screen.css as under:
.fAdvertisement.fBanner {
max-width: 728px;
max-height: 90px;
height: 90px
margin: 30px auto 0;
}
So basically I found a really cool example for cycling background images using JavaScript and jQuery.
What would be the best approach to adding an overlay text description effect for each slide?
So for instance, each slide will also have a text description overlayed somewhere on each image with it's own style . Would it be possible to have this text also come in with it's own effects. So the image fades in, and then the text description slides in from the left, and so on
HTML
<body>
<div id="background_cycler">
<img class="active" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/View_from_a_ridge_between_Segla_and_Hesten%2C_Senja%2C_Norway%2C_2014_August.jpg/1920px-View_from_a_ridge_between_Segla_and_Hesten%2C_Senja%2C_Norway%2C_2014_August.jpg" width="1000px" height="1000px" alt="" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/Amanhecer_no_Hercules_--.jpg/1920px-Amanhecer_no_Hercules_--.jpg" alt="" width="1000px" height="1000px" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Giant_Manta_AdF.jpg/1920px-Giant_Manta_AdF.jpg" alt="" width="1000px" height="1000px" />
</div>
JQUERY
$('#background_cycler').hide();
window.cycleImages = function() {
var $active = $('#background_cycler .active');
var $next = ($('#background_cycler .active').next().length > 0) ? $('#background_cycler .active').next() : $('#background_cycler img:first');
$next.css('z-index', 2); //move the next image up the pile
$active.fadeOut(1500, function() { //fade out the top image
$active.css('z-index', 1).show().removeClass('active'); //reset the z-index and unhide the image
$next.css('z-index', 3).addClass('active'); //make the next image the top one
});
}
$(window).load(function() {
$('#background_cycler').fadeIn(1500); //fade the background back in once all the images are loaded
// run every 7s
setInterval('cycleImages()', 7000);
})
CSS
#background_cycler {
padding: 0;
margin: 0;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#background_cycler img {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 1;
}
#background_cycler img.active {
z-index: 3;
}
Here's a solution like Andy's, but keeping the img tags:
https://jsfiddle.net/2y8fo13d/
Instead of using img tags, you can use more generic div tags to act as the slides. Then you can fill them with whatever content you wish, check out this as an example:
https://jsfiddle.net/00gow9Lt/1/
Here I have used div tags with some simple text and the original images as backgrounds.
You can style each one's content separately with css for a different look, but to have sliding effects on the text itself would require significantly more code. For that I would suggest reading up on jQuery animations in more detail.
I've got a bunch of images, on click I want the images to turn white emulating some kind of fade effect. So you click it and for 1 second it fades from the original image to just white. I also need it to turn back to the original image when the user clicks something else.
Is this possible with JavaScript? - If so what should I be looking at (I'm really bad with graphics).
I've had a go at trying this with opacity but I don't want the background to be visible behind the image
Psuedo-element Solution
You could use a wrapper with a pseudo-element to overlay what you're looking for -- and the animations are handled by a toggled CSS class (which is ideal for performance).
CodePen Demonstration
HTML
<div class="whiteclicker">
<img src="http://lorempixel.com/400/200" alt=""/>
</div>
SCSS
#import "compass/css3/transition";
body { background: gainsboro; text-align: center; }
.whiteclicker {
display: inline-block;
position: relative;
&::after {
content: "";
display: block;
position: absolute;
top:0; left:0; right:0; bottom:0;
background: white;
opacity: 0;
#include transition(opacity 1s ease);
}
&.active::after {
opacity: 1;
}
}
JS
$('.whiteclicker').click(function(){
$(this).toggleClass('active');
});
To ameliorate the Spencer Wieczorek solution (the way two seems to be the best solution on my opinion) :
What about creating the white div on the fly (and fade it in and out) instead of put it in the html code ?
See the fiddle.
$("#myImage").click(function(){
$(this)
.parent().css({position:'relative'}).end()
.after($('<div>')
.hide()
.css({position:'absolute'
, top: $(this).position().top
, left: $(this).position().left
, width: $(this).width()
, height: $(this).height()
, background: '#FFF'
})
.fadeIn('fast')
.on({
click : function(e){
$(this).fadeOut('fast', function(){ $(this).remove();});
}
})
);
});
Then, you don't have anything to add to the html code or in the css styles, Jquery does everything.
#Spencer Wieczorek : I did my own answer, because I did not agree with your way of designing the css style (the fixed position is really not good, especially if the page is scrolled for example...). Mine is more ... standalone-y ;)
You might want to try having two images stacked on each other.
See this:
<script type="text/javascript">
var image1 = '<img class="images" src="Image 1" onClick="switch();" />';
var image2 = '<img class="images" src="Image 2" onClick="switch();" />';
var currentImage = 1;
function switch(){
if(currentImage==1){
currentImage++;
document.getElementById("image").innerHTML = image2;
}
if(currentImage==2){
currentImage--;
document.getElementById("image").innerHTML = image1;
}
}
</script>
<style>
.images{ position:fixed; top: 0; left: 0; }
</style>
<img class="images" src="Black image" />
<div id="image"><img class="images" src="Image 1" onClick="switch();" /></div>
For the fade I'm just gonna see how you could do it.
EDIT:
<script type="text/javascript">
var fadecount = 100;
function fade() {
document.getElementById("imageToFade").style.opacity = fadecount;
fadecount--;
if(fadecount==0){
clearTimeout(fade);
}
}
function start_fade(){
var fade = setTimeout(fade(), 10);
}
</script>
With Base 64 you can just have the binary version of the picture and then an all white picture and based on the .click you reassign the src to the white base64...
document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="
just change to the all white version after the click, technically js driven from click event, and doesn't involve two different elements existing just at different layers...
I'm using jquery in my webpage but fadeIn and fadeOut doesn't work after the first two times. i had tried with show(500,...), hide and animate, with easing and without it, but it behaves the same.
here is one of the div's i want to fadeIn
<div id="rfcdiv" style="position: absolute; display: none" >
<img alt="Ticket" src="images/DATOSfiscales.png" style="position:absolute;width:fit-content;left:0px;top:230px;z-index:18"></img>
<div id="text1" style="position:absolute; overflow:hidden; left:45px; top:341px; width:37px; height:21px; z-index:20"><div class="wpmd"><div><font face="Myriad Pro Light"><B>RFC:</B></font></div></div></div>
<input name="RFC" id="RFC" type="text" maxlength=13 value="<?php if (isset($_GET['rfc'])){echo $_GET['rfc'];}?>" style="position:absolute;width:276px;left:79px;top:340px;z-index:13">
<div id="ValidacionRfc" style="position:absolute; overflow:hidden; left:360px; top:341px;width: fit-content;height: fit-content;z-index:14;display: none" onmouseover="mostrarglobo(1)" onmouseout="mostrarglobo(0)"></div>
here is the code that shows it:
$("#image1").animate({ height: "450px" }, 800, function () {
$("#ingresarfolio").animate({ top: "170px" }, 800, function () {
$('#rfcdiv').fadeIn(500, function () {
recheck_ticket(1);
});
});
});
you can try here: MyPage
(just pressing Enter on the textbox)
//apologize about my english
edit:
When the page loads it fades in correctly, if you put a leter on the textbox it will fadein an icon correctly but when you only press enter it will just appear after a time.
Sorry, i cant show the code correctly so the code is the first commented code in MyPage
In you script (facturar.js)
the fadeIn syntax is
$('#rfcdiv').fadeIn(function () {
recheck_ticket(1);
}, 2000);
try changing it to
$('#rfcdiv').fadeIn(2000, function () {
recheck_ticket(1);
});
Refer .fadeIn()
Then,
Remove position:absolute from all components inside #rfcdiv and let them placed in document flow.
and position #rfcdiv whereever you want by applying position:absolute, top and left to it.
like this
#rfcdiv {
display: none;
position: absolute;
top: 150px;
z-index: 999;
left: 10px;
}
From my first look without going to your website, your timing is incorrect. See edit below.
$('#rfcdiv').fadeIn(function () {
recheck_ticket(1);
}, 500);