Develop Reference

Sliding image from left to right

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>

view php remote file using .load after it's fully loaded

I'm using a simple code to display php files in a container without loading the page using .load with a function to display and hide a loading animated image
<style>
.loadingbg{width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #84ffbf;
display: none;
}
.loadingbg img{width: 60px; height: 60px; position: absolute; left: 48%; top: 48%;}
</style>
<script>
$(document).on('click','a',function (e) {
$(".loadingbg").css('display','block');
e.preventDefault();
var url = $(this).attr('href');
$('#container').load(url+ '#content',function () {
$(".loadingbg").css('display','none');
});
});
</script>
<div class="loadingbg"><img src="images/page-loader.gif"></div>
contact
about
<div id="container">
<h1>index</h1>
</div>
so when i click on a link it displays the background and the small animated image to load the other page without changing the url but it fetches the text content fast and the loadingbg disappears and it starts loading the images in the new webpage. What i want is not to hide the loadingbg until the remote php file is totally loaded including images.
Demo

After you load the content, you have to make sure that all images are loaded.
In your load callback functions you can use imagesLoaded library (or any other library that validates image loading). Also on anchor click I hide the #container and when all the images are loaded - then show it again:
$(document).on('click','a',function (e) {
$(".loadingbg").css('display','block');
$("#container").hide();
e.preventDefault();
var url = $(this).attr('href');
$('#container').load(url+ '#content',function () {
$('#container').imagesLoaded( function() {
// images have loaded
$(".loadingbg").css('display','none');
$("#container").show();
});
});
});

I have to admit that I'm not 100% sure this will work...
But I would try this:
$(document).on('click','a',function (e) {
$(".loadingbg").css('display','block');
e.preventDefault();
var url = $(this).attr('href');
$('#container').load(url+ '#content',function () {
$('#container').on("load", function(){
$(".loadingbg").css('display','none');
});
});
});
Binding the "load" event to your #container in the .load() callback is supposed to "delay" the .loadingbg CSS change to the moment where all content has completely loaded.

show loading icon until the page is load?

I wanted to show a loading icon to users until the page elements are fully loaded. How can I do that with javascript and I want to do it with javascript, not jquery?
Here is a link how google does it
How can I do this?
triggering some function on onload event or something like this .. I know it will be done somewhat like this or any other ways to do it?
Or there is some event for it?
UPDATE
I did something using display property I hide the body element but and onload of body tag I change its property but where to put the loading icon and add more interactivity.

HTML
<body>
<div id="load"></div>
<div id="contents">
jlkjjlkjlkjlkjlklk
</div>
</body>
JS
document.onreadystatechange = function () {
var state = document.readyState
if (state == 'interactive') {
document.getElementById('contents').style.visibility="hidden";
} else if (state == 'complete') {
setTimeout(function(){
document.getElementById('interactive');
document.getElementById('load').style.visibility="hidden";
document.getElementById('contents').style.visibility="visible";
},1000);
}
}
CSS
#load{
width:100%;
height:100%;
position:fixed;
z-index:9999;
background:url("/loading.gif") no-repeat center center rgba(0,0,0,0.25)
}
Note:
you wont see any loading gif if your page is loaded fast, so use this code on a page with high loading time, and i also recommend to put your js on the bottom of the page.
DEMO
http://jsfiddle.net/6AcAr/ - with timeout(only for demo)
http://jsfiddle.net/47PkH/ - no timeout(use this for actual page)
update
http://jsfiddle.net/d9ngT/

The easiest way to put the loader in the website.
HTML:
<div id="loading"></div>
CSS:
#loading {
position: fixed;
width: 100%;
height: 100vh;
background: #fff url('images/loader.gif') no-repeat center center;
z-index: 9999;
}
JQUERY:
<script>
jQuery(document).ready(function() {
jQuery('#loading').fadeOut(3000);
});
</script>

add class="loading" in the body tag then use below script with follwing css code
body {
-webkit-transition: background-color 1s;
transition: background-color 1s;
}
html, body { min-height: 100%; }
body.loading {
background: #333 url('http://code.jquery.com/mobile/1.3.1/images/ajax-loader.gif') no-repeat 50% 50%;
-webkit-transition: background-color 0;
transition: background-color 0;
opacity: 0;
-webkit-transition: opacity 0;
transition: opacity 0;
}
Use this code
var body = document.getElementsByTagName('body')[0];
var removeLoading = function() {
setTimeout(function() {
body.className = body.className.replace(/loading/, '');
}, 3000);
};
removeLoading();
Demo: https://jsfiddle.net/0qpuaeph/

HTML, CSS, JS are all good as given in above answers. However they won't stop user from clicking the loader and visiting page. And if page time is large, it looks broken and defeats the purpose.
So in CSS consider adding
pointer-events: none;
cursor: default;
Also, instead of using gif files, if you are using fontawesome which everybody uses now a days, consider using in your html
<i class="fa fa-spinner fa-spin">

Element making ajax call can call loading(targetElementId) method as below to put loading/icon in target div and it'll get over written by ajax results when ready. This works great for me.
<div style='display:none;'><div id="loading" class="divLoading"><p>Loading... <img src="loading_image.gif" /></p></div></div>
<script type="text/javascript">
function loading(id) {
jQuery("#" + id).html(jQuery("#loading").html());
jQuery("#" + id).show();
}

HTML page
<div id="overlay">
<img src="<?php echo base_url()?>assest/website/images/loading1.gif" alt="Loading" />
Loading...
</div>
Script
$(window).load(function(){
//PAGE IS FULLY LOADED
//FADE OUT YOUR OVERLAYING DIV
$('#overlay').fadeOut();
});

firstly, in your main page use a loading icon
then, delete your </body> and </HTML> from your main page and replace it by
<?php include('footer.php');?>
in the footer.php file type :
<?php
$iconPath="myIcon.ico" // myIcon is the final icon
echo '<script>changeIcon($iconPath)</script>'; // where changeIcon is a javascript function whiwh change your icon.
echo '</body>';
echo '</HTML>';
?>

Parallax transition with subtle bounce between two anchors/divs

I'm trying to have just one link on my website that links to the 'below-the-fold area' that I'll have a simple contact form at; the idea is to have that link do a nice transition similar to js parallax and once it reaches the below the fold area it kind of subtly 'bounces' a few pixels back up. (The space between anchors is about 800px)
My attempts in the code below, but it's still just being read as an anchor-point without any transition. (Should I be loading a different jQuery library, or load them in a different order?)
Updated Attempt 12-16:
Calling in the head
Libraries being called:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
Just About before closing head tag. (A few inline styles are right before closing </head> if matters)
<script type="text/javascript">
$('a').on('click', function (event) {
event.preventDefault();//stop the browser from jumping to the anchor
var href = $(this).attr('href'),
oset = $(href).offset().top;
$('html, body').stop().animate({
scrollTop : oset
}, 700, function () {
location.hash = href;
});
});
</script>
Mark-up, CTA divs
<div id="top" class="scrollpls"><img src="http://www.mysite.com/imgs/down_btn.png" border="0" style="float:right; margin-top:200px;"></div>
..and near bottom of doc
<div id="bottom" class="scrollpls"><a href="#top">
<img src="http://www.mysite.com/imgs/upsubway.png" style=" float: right;
float: right;
margin-right: -74px;
margin-top: 700px;
}"></a></div>
http://jsfiddle.net/Hpegt/1/
A fiddle created from an early Question regarding this function and states creating a style with the div height in it. Since declaring this for all divs as in the fiddle would break my layout, I tried it with a class
.scrollpls {
height : 500px;
border :0px solid #000;
}
What am I doing wrong here? After I someday get this, I'll be trying to figure out how to implement an 'ease' with a subtle bounce back after it navs to the points.
Thanks for any help

There are tons of built-in easing effects if you include jQueryUI.
Try this modification to your fiddle - http://jsfiddle.net/CzQXC/
$('a').on('click', function (event) {
event.preventDefault();//stop the browser from jumping to the anchor
var href = $(this).attr('href'),
oset = $(href).offset().top;
$('html, body').stop().animate(
{
scrollTop : oset
},
1000,
'easeInOutElastic',
function ()
{
location.hash = href;
}
);
});

Try this:
<script type="text/javascript">
$(function() {
// this should really be in a click handler, but just for an example:
$('html,body').animate({
scrollTop: $("#testtop").offset().top
}, 2000, 'bounce');
});
</script>
Note: the bounce parameter specifies the easing to use. This is part of jQueryUI so you'll need to download that and include it on your page for the effect to work properly.

For some reason it took a few minutes to function after I put the code in, but finally it resolved and I think this was the solution:
#top, #bottom {
height : 130px;
border : 0px solid #000;
overflow:hidden;
}

jQuery fade to new image

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