I'm putting together this website: www.mccraymusic.com/newsite and I am trying to make it so that the navigation bar (which I know is not styled) fades in after the background fades in. Instead it seems to want to fade out.
I thought I have all the code in place and javascript correct. I actually want it so that the navigation bar and content I add to the site will fade in, after the initial background fade in occurs.
Do you I need to move some stuff around in my html? or how can I achieve this? I don't think I'm far from getting what I want
To start an animation after another, you can use the callback of .fadeIn() (or any effect function). Something like:
$( "#div1" ).fadeIn(function(){ $( "#div2" ).fadeIn(); });
Or (easier to read):
$( "#div1" ).fadeIn(function(){
$( "#div2" ).fadeIn();
});
div1 will fade in, and when it finishes, div2 will start to fade in.
Take a look in the docs: http://api.jquery.com/fadeIn/
I used this to fade stuff in with jQuery... pros will tell you this is a terrible practice... because you have the div initially set to display: none... and if javascript is off - then it will never fade in... but this works. and if it's just for a band or artist - chances are - no one is going to be looking at this site on IE 6 etc... but look in to no.js or whatever and have a back up plan.
<!--fade in div-->
<script type="text/javascript">
$(document).ready(function() {
$("#div-name").css("display", "none");
$("#div-name").fadeIn(15000);
});
</script>
Try callback function of jQuery
<script type="text/javascript">
$(function() {
$("body.bg").fadeIn(200,function(){
$('.second').fadeIn()
});
});
</script>
Related
I am working within Squarespace so some of my options are limited (I can't add a separate image div and use that as a replacement, or if I can I'm not sure how). I am trying to slowly fade in a new image on hover but WITHOUT a full Fade Out -> Fade in Effect that results in a white "blink" in between.
Other solutions on StackOverflow all seemed to contain the full Fade Out/Fade In and did not work.
HTML:
<div id='#block-2091ad01016e0c16fbf5'>
<img class="thumb-image"
src="https://static1.squarespace.com/static/5cae826d21d24e00012dc02b/t/5e0a26c2afc7590ba0a3b443/1603914016365/Jason-5941.jpg">
</div>
JS:
<script>
(function($) {
$(document).ready(function() {
$('#block-76b0ced63f31cd9e2342').mouseover(function() {
$( "#block-76b0ced63f31cd9e2342 .thumb-image" ).attr("src","https://static1.squarespace.com/static/5cae826d21d24e00012dc02b/t/5fc2881b9ee0f32b87a52a14/1606584347864/Jason_Art.jpg");
});
$('#block-76b0ced63f31cd9e2342').mouseout(function() {
$( "#block-76b0ced63f31cd9e2342 .thumb-image" ).attr("src","https://static1.squarespace.com/static/5cae826d21d24e00012dc02b/t/5e0a26c2afc7590ba0a3b443/1603914016365/Jason-5941.jpg");
})
})
})(jQuery);
</script>
I think you're much better off creating a second from JS and get this crossfade effect from css. See fiddle for example:
https://jsfiddle.net/x0ye6r5L/
$(function() {
var jsonArt = '<img id="bottom-art-jason" src="https://static1.squarespace.com/static/5cae826d21d24e00012dc02b/t/5fc2881b9ee0f32b87a52a14/1606584347864/Jason_Art.jpg" class="thumb-image" />';
$('#myDiv').prepend(jsonArt);
});
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/
This is my code:
$( document ).ready(function() {
var target = $(".passthis").offset().top-$(window).height();
$(document).scroll(function() {
if ($(window).scrollTop() >= target) {
$(".something").fadeIn(2000);
}
});
});
HTML:
<div class="passthis" style="text-align:center;font-size:20px;margin-top:815px;">
Scroll Below here
</div>
Right now this code will show div.something only when the user passes div.passthis. The .passthis div is exactly at the bottom of the screen. Howver, I want to move .passthis the middle of the screen but being new to JS i am unsure how i can modify my script to do that. Can I use a number for x,y or something?
Question:
What can I do to move the .passthis to the middle of the screen and still make .something show after the user passes .passthis.
Here is a jsFiddle demo that you are welcome to play with. As I explained, if the window never scrolls, nothing is going to happen (.something will never appear). Additionally, you can see the numbers for the different values in this demo. It should give you an idea of what you're shooting for as far as the MATH of it all is concerned. As recommended above, you should read up on jQuery's .scrollTop() and other window dimensional methods and values.
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"});
});
});
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/