in my html I have:
<div id="testId">
<img src="img/Capture.PNG" alt="0" style=" background-color: red; margin-left:50px; "/>
</div>
In javascript I have:
$(function () {
$("#testId").fadeOut(2000, function () {
alert('animation complete');
});
});
I have also tried:
$(function () {
$("#testId").fadeOut("slow", function () {
alert('animation complete');
});
});
and my image does not animate. it goes from 100% visible to 0%.
Edit
It does not work in any browser. I have tried google chrome, safari, and firefox.... It is really strange. I wish I can show you a video of my computer
I have used jquery before I could not understand what was going on!
I had 2 problems:
1) I wanted to animate the image right when the page loaded so if you recall I did:
$(function () {
$("#testId").fadeOut("slow", function () {
alert('animation complete');
});
});
$(function(){}) executes that function when the dom is done but the image was not loaded yet!. I have to animate the image latter.
2) jquery library jquery-1.4.1.js was not working. I had to go to their site and download the latest version. Maybe I modified the file by accident.
edit
I downloaded version jquery-1.4.1-vsdoc.js again in order to see if I modified the file by accident and with that version my animation does not work....
Check below link which should help you.
http://www.viget.com/inspire/jquery-ie-png-24-ie-black-background-issue-solved/
Related
I've coded a fancy preloader with jQuery for my project. While my AJAX query is processed it is activated.
I have used to load it:
$(document).ajaxStart(function) () {
#preloder is displayed
}
And to stop it:
$(document).ajaxStart(function) () {
#preloder is turned off
}
Problem is my AJAX returns images src that are then diplayed in a <div> but some of the pictures are really heavy and most of the time my preloader stops before my pictures are completely loaded.
I went through jquery documentation and found a .load(function). But it seems that it has been removed from jQuery. It seems that it has been replaced by .trigger("load"). Can it be useful for my problem? I tried to implement it but with no sucess.
Quick answer from #Aureliano Far Suau that worked beautifully for me. No plugin needed:
$('img').on('load', function() {
// do something
});
For multiple images:
var loaded = 0;
$('img').on('load', function() {
loaded++;
if(loaded == $('img').length){
// do something
}
});
I would like to preload everything before HTML even starts displaying.
The problem is with loading external fonts, images etc.
I was trying to make simple jquery function with:
CSS:
html { display:none; }
jQuery:
$(window).load(function() {
$('html').css('display', 'block');
});
But that doesn't really work.
The main reason that I want to preload is that I have font animation on the page start and when the font isn't loaded and CSS animation is fired it looks a little buggy.
load() as a shortcut for on('load') is deprecated:
Try using
$(window).on('load', function() {
$('html').css('display', 'block');
});
I'm looking to simply hide and image before the page loads and then once the page has loaded to show the image. Problem is when I try to show the image it doesn't show the image at all.
Here is my html code:
<body>
<div id ="splash" data-role="page">
<center>
<div id='class'> <img src="BookBayText.png"></div>
<div id='book'> <img src="Book.png"></div>
</center>
</div>
</body>
Here is my javascript/jquery mobile:
<script type="text/javascript">
$(document).on('pagebeforeshow','#splash',
function()
{
$("#book").hide();
});
$(document).on('pageinit','#splash',
function(){
setTimeout(
function()
{
$("#class").animate({top: "1em"}, 'slow');
},3000);
//For some reason this line below doesn't run
$("#book").show();
});
</script>
Any ideas why this isn't working??
I managed to get the desired effect I wanted with the following code:
setTimeout(
function()
{
$("#class").animate({top: "1em"}, 'slow');
$("#book").show();
},2000);
Basically I moved the $("#book").show(); line into the setTimeout function. But it still leaves me a tad lost as to why the code wouldn't show the image outside the function. If anyone with the answer to this could update this answer it would really be appreciated.
kinda similar to this post jQuery mobile popup on pageinit .
Although the post blames a delay in the browser, for me it is still unclear why it does it. I have never experience such behaviour.
I wonder what if you do the following changes:
put your center tag inside a data-role:content,
replace pageinit for pageshow.
search your iem as follows
inside either pageinit or pageshow (not settimeout).
>
var elem = $("[data-role='page']:last").find('#book img'); // others may use $.mobile.activePage
if (elem.length) {
// check height or img width here...
}
How can i add fade in for this specefic code? I want the pictures to fade in on onload.
Have done some research on Stackoverflow, but couldn't find anything useful. Some help would be appreciated.
<script type="text/javascript">
window.onload = function(){
var img = document.getElementById('img')
if(img.clientHeight<$('#div').height()){
img.style.height=$('#div').height()+"px";
}
if(img.clientWidth<$('#div').width()){
img.style.width=$('#div').width()+"px";
}
}
</script>
Extra question: Is it also possible to add a load-function to this code?
Sj what your attempting to do can be simplified using jQuery. jQuery is a JavaScript library that makes working with HTML documents much easier.
Here is a little fiddle demonstrating their fadeIn method: http://jsfiddle.net/zgRtd/3/
Just to make sure your clear on what's happening:
We declare a function named load Image - this function uses jQuery to attach the fadeIn method to our jQuery object (referenced with CSS Selectors).
The images are set to display: none; initially.
function loadImage () {
$('#your-image').fadeIn('slow', function () {
// Animation complete
});
}
We call the function once the document is loaded (this could be bound to any event), I've commented this out in the JSFiddle example.
$(document).on('ready', function () {
loadImage();
});
I am on my way to develop my first jQuery plugin.In which I need an animation to auto play on scroll position.I have tried many ideas but nothing worked out.Finally I put the auto play function inside plugin and called in my HTML like this.
$(document).ready(function () {
$(window).scroll(function () {
jQuery.fn.autoplayAnimation();
});
is there any way that I can put document.ready() or window.scroll() inside my plugin and make it working as it is in HTML.
any help will be great full..
you want to auto assign the event when the page loads right?
why don't you just put this in your plugin file:
(function($){
//your plugin code
$(document).ready(function () {
$(window).scroll(function () {
jQuery.fn.autoplayAnimation();
});
});
})(jQuery);
$(window).scroll(scrollHandler);
function scrollHandler(){
jQuery.fn.autoplayAnimation();
}