I have implemented jQuery tabs and am using the opacity technique to fade one tab out and then fade another in. I would like to have the second image fade over the first and then hide the first image. That way the background behind the tabs will not be shown. Please advise.
Current jQuery code:
<script type="text/javascript">
$(function() {
$('#web-select').tabs({ fx: { opacity: 'toggle', duration:'fast'} });
});
</script>
Your code above will work in the 1.6 UI, but in the 1.7.2 UI version try the following:
$('#web-select').tabs('option', 'fx', { opacity: 'toggle', duration: 'fast' });
You could use the .show() and .hide() snippets to do such a thing!
Related
I want to launch an animation as soon as my home page opens, but it takes time to display (the body remains displayed for a while).
My script :
$(document).ready(function(){
$('.logo').hide();
});
$(window).load(function(){
$('.logo').fadeIn('fast');
$(".logo").animate({
marginTop:'0px',
opacity:1
},200,'swing');
});
I tried to manipulate this code but I'm new to javascript :(
$(window).on('load', function() {
$('.logo').hide().fadeIn('fast').animate({marginTop:'0px', opacity:1}, 500, 'swing');
});
This code uses the $(window).on('load', function(){}) function to ensure that the entire page, including images and other assets, is loaded before running the animation.
The $('.logo').hide().fadeIn('fast').animate({marginTop:'0px', opacity:1}, 500, 'swing'); function hides the logo initially, then fades it in quickly, and finally animates it by moving it up by 0 pixels and setting the opacity to 1 over a period of 500 milliseconds using the "swing" easing function.
Note: Make sure that you have included the jQuery library in your HTML file for this code to work. You can do so by adding the following code in the head section of your HTML file:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I hope this helps!
Great thanks a lot. I just forgot to say that the logo goes up. I forgot to script. I'm giving you all of it, but of course just the fact that the logo goes up is enough for me. Thanks again, you're GREAT :)
<!-- /logo descend -->
$(window).on('load', function() {
$('.logo').hide().fadeIn('fast').animate({marginTop:'0px', opacity:1}, 500, 'swing');
});
<!-- /Slider goes up a bit -->
$(document).ready(function(){
$('#slider').hide();
});
$(window).load(function(){
$('#slider').fadeIn('slow');
$("#slider").delay(400).animate({
marginTop:'-1200px',
opacity:1
},800,'swing');
});
<!-- /logo and Slider rise (2 scripts) -->
$(document).ready(function(){
$('.logo').hide();
});
$(window).load(function(){
$('.logo').fadeIn('slow');
$(".logo").delay(200).animate({
marginTop:'-2400px',
opacity:1
},800,'swing');
});
$(document).ready(function(){
$('sl.slider').hide();
});
$(window).load(function(){
$('.sl-slider').fadeIn('slow');
$(".sl-slider").delay(800).animate({
marginTop:'0px',
opacity:1
},800,'swing');
});
This is my script;
<script src="http://static.tumblr.com/mviqmwg/XyYn59y3a/jquery.photoset-grid.min.js"></script>
<script>
$(document).ready(function() {
$('.photoset-grid').photosetGrid({
gutter: '0px',
});
});
</script>
<!-- /Photoset-grid script -->
This makes the images "jump into grid effect"
I want everything to show up normaly.
Is there a hide effect with css and then show it when everything is loaded?
Thank you for anny advice!
If you look at the source for Photosetgrid:
https://github.com/stylehatch/photoset-grid/
You can see that they use a simple style tag: style="visibility: hidden;"
If you prefer to use jquery it would be:
$(".photoset-grid").hide();
To make it visible it would be this way:
$('.photoset-grid-basic').photosetGrid({
onComplete: function(){
$('.photoset-grid-basic').attr('style', '');
//or $('.photoset-grid-basic').show();
}
});
You can see more info about its usage here:
http://stylehatch.github.io/photoset-grid/#demo-basic-usage
I'm using jQuery code to animate a div from left to right on load, and then by clicking the close button the div hides from right to left. It's working fine, it's just not going left to right horizontally but diagonally. What am I doing wrong? Here's an example of the code I'm using http://jsfiddle.net/N8NpE/2/
$(function(){
$("#content-box").hide(0).delay(0).show(500);
});
$(function(){
$("#ClosePanel").click(function () {
$("#content-box").hide("slow");
});
});
Any help will be greatly appreciated.
You could try using .animate() instead of .hide() and .show(). This will give you a little more control over everything.
$("#content-box").animate({'width': 240},500);
And to close, include a callback function to set display to none after the animation:
$("#content-box").animate({'width': 0},500,function(){
$("#content-box").css('display','none');
});
http://jsfiddle.net/N8NpE/6/
You should include jQuery UI in your script and change your function a little bit:
$(function(){
$("#content-box").hide(0).delay(0).toggle('slide', {
direction: 'left'
}, 1000);
});
Here is an updated jsfiddle: http://jsfiddle.net/N8NpE/4/
$('#content-box').animate({width: 'toggle'});
http://jsfiddle.net/U7wGt/
I'm trying to make an image slidein on page load but it doesn't seem to work at all. The delay has no problem but the sliding effect doesn't do anything. Any help would be greatly appreciated.
$(function() {
$(".bgslide").one('load', function () {
$(this).delay(1000).show("slide", { direction: "left" }, 'linear', 2000);
}).each(function() {
if(this.complete) jQuery(this).load();
});
});
Here is a link to a jsfiddle as well: http://jsfiddle.net/cDYvh/
The slide effect comes with jQuery UI which you didn't include: http://jsfiddle.net/cDYvh/1/
You could also use $.animate() to avoid including jQuery UI. For example, you could accomplish your example with something like this:
$(this).animate({ left: 2000px });
Note: You'll probably need to apply position:absolute to the elements. Other items can be animated as well, including color, opacity, etc.
Animate Example
People asked similar questions before, but mine is with a twist:
I'm using Supersized jQuery plugin to load a single full-screen background image. The code loading the image is this:
<script type="text/javascript">
jQuery(document).ready(function($) {
$.supersized({
//Background image
slides : [ { image : 'http://www.cybart.com/bscg/wp-content/themes/Custom/images/backgrounds/bg.jpg' } ]
});
$('#content').delay(3500).fadeIn(600);
});
</script>
As you can see in the code, I chained the fadeIn effect after the "supersized" function. I want to fade in the #content div after the background image (bg.jpg) not just finished loading but also finished fading in. I used the solution I don't particularly like: setting a long delay before my fadeIn effect.
What would be the best way to fade in the content div after Supersized image finihsed fading in?
Would be grateful for your help!
If anyone is still looking for a solution, here's what I did:
Supersized.3.2.7.js
Right after the img.load function, within the base._start function, I added the following:
img.fadeOut();
img.bind("load", function () { $(this).fadeIn(750); });
Found my own answer:
the solution is to edit the supersized core js file. In the file, after this bit of code:
$('#supersized-loader').hide(); //Hide loading animation
element.fadeIn('fast'); //Fade in background
resizenow();
I added my own line:
$('#content').delay('fast').fadeIn('fast');
Worked like magic!
Have you tried using the jQuery .ready() function?
jQuery(document).ready(function($) {
$.supersized({
//Background image
slides : [ { image : 'http://www.cybart.com/bscg/wp-content/themes/Custom/images/backgrounds/bg.jpg' } ]
});
$.supersized.ready( function() {
$('#content').fadeIn(600);
});
});