I'm working on this site: http://mccraymusic.com/newsite/ and I am having trouble figuring how to fade in the navigation bar correctly over the background AFTER the background has faded when clicking "enter site." I know the navigation bar isn't styled yet. I'm pretty sure I have the right code for the navigation to fade in. Just not sure how to make it work so it fades in when I want it.
Thanks
I suspect you need to use a callback in jQuery. Basically, the second function runs AFTER the first has completed.
http://www.w3schools.com/jquery/jquery_callback.asp
Here is a fiddle of it http://jsfiddle.net/YL4p7/
Fadein has a builtin callback, just add you animation into that callback and it will execute after the background has faded in.
also add relative position to #container so that it can be seen over the bg image.
$(function() {
var images = ["black.jpg","bg.jpg"];
$('<img>').attr({'src':'http://mccraymusic.com/newsite/assets/images/'+images[0],'id':'bg','alt':''}).appendTo('#bg-wrapper').parent().fadeIn(0);
$('.move').animate({
top:200,
left:250,
});
$('.entersite').click(function(e) {
e.preventDefault();
var image = images[1];
$('#bg').parent().fadeOut(200, function() {
$('#bg').attr('src', 'http://mccraymusic.com/newsite/assets/images/'+image);
$(this).fadeIn(1000, function() {
$('.navbar').fadeIn(1000);
});
});
$('.move').animate({"left": "-=50px", "top": "-=200px"});
});
});
Related
I am creating a simple image marquee concerning images. Seems simple enough, however it doesn't want to do the animations in order. The code shown, does work. It hides the first image and fades it in behind the rest and the cycle continues. However, it isn't real eye pleasing as the first image just disappears.
I would love to use the animate I have commented out. Animate the first image out, append it behind the rest and then fade it back in and repeating the process for as long as required. However replacing the hide() with the animate makes the image append first and then slide/fade out and then fadeIn in the wrong order.
Is there something I'm doing wrong in my sequence of events or how do I get it to work correctly?
<script type="text/javascript">
$(document).ready(function() {
function doSilver() {
image = $('.str3 .inline-image:first');
console.log(image.attr('src'));
image.hide().appendTo('.str3').css('display','hidden').fadeIn();
//$('.str3').append(image);
//$(image).animate({ height: 'toggle', opacity: 'toggle' }, 'slow');
}
setInterval(doSilver, 5000);
});
</script>
JSFiddle (showing animation problem): http://jsfiddle.net/zmnLa3wq/5/
try this
<script type="text/javascript">
$(document).ready(function() {
function doSilver() {
image = $('.str3 .inline-image:first').parent();
console.log(image.attr('src'));
image.fadeOut(1200);
setTimeout(function(){image.appendTo('.str3').fadeIn(1200)},1200);
}
setInterval(doSilver, 5000);
});
</script>
http://jsfiddle.net/zmnLa3wq/32/
I have menu structure as show here.
All item have a background img. But when hover back, hide my menu item img. Because, js code isn't valid this img but i don't know how can i solve this.
I want, still javascript fade effect but don't hide my img.
Normally:
Problem: (Hover and hover-out)
I want:
If what you want is to fade the background on hover, and restore it on hover-out, then use the following js:
$(document).ready(function(){
var bg;
$("#right_menu a").mouseover(function() {
bg = $(this).css('background-color');
$(this).animate({ backgroundColor:'#002C6A'},500);
}).mouseout(function() {
$(this).animate({ backgroundColor:bg},500);
});
});
If you want to use image then change background-color to background.
In action: http://jsfiddle.net/3TDF3/2/
UPDATE: Just revisited code. Much of the problem is that css class is set on li, while modifications a being made on a
You are setting background-image to li, but animating a. Therefore the background of li gets hidden with new background of a.
Change $("#right_menu a").mouseover to $("#right_menu li").mouseover
Try using background color instead of image. When mouse is hovers away from the link, set the background color to the previous value. Using image where background color seems to be sufficient looks like a bad idea.
try this
$(document).ready(function(){
var backgroundimage = $(this).css("background-image");//store it in a variable
$("#right_menu a").mouseover(function() {
$(this).animate({ backgroundColor:'#002C6A'},500);
$(this).css("background-image","none");//remove it
}).mouseout(function() {
$(this).animate({ backgroundColor:'#fff'},500);
$(this).css("background-image",backgroundimage );//bring it back
});
});
I created a fiddle
http://jsfiddle.net/gifcy/bJJ5s/5/
On DOM ready I hide the image.
I could successfully reveal the image from left to right using animate function.
Can someone show how to reveal from right to left. What additional parameters need to used.
Use jquery ui show() function
$(document).ready(function() {
$('#nature').hide();
$('#animation').click(function() {
$('#nature').show('slide', {direction: 'right'},1000);
});
});
fiddle here http://jsfiddle.net/bJJ5s/6/
Pretty sure this will work cross browser
#nature,
#nature img {
float:right;
}
http://jsfiddle.net/g8zDk/
What would be the best way to have a single image which when you hovered your mouse over it, it would cycle fade in/out into a series of other images (like 3 or 4) before returning back to the original? Also, it would stop fading/changing images and go back to the original image if you moved your mouse off of the image.
Any help is appreciated.
Thanks!
I would see about having the mouseover event (or hover if you are using an external library) of the object that you are wishing to switch tied to a window.setTimeout function. Make sure to store the timeout id so that you can cancel it if the user's mouse exits the window. The window.setTimeout would then scroll through the pictures.
Maybe something like this:
$(function(){
$("#test").hover(function(e) {
$.data("timeout", window.setTimeout(function() {
//Transition here
}));
}), function(e) {
window.clearTimeout($.data("timeout"));
//Put image back to normal
});
});
Hope this helps,
JMax
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);
});
});