I am using the following script for an animated background, right now the pictures fadein and fadeout but I want them to slide, horizontally, to the left.
My question is, is this a standard jquery "function" because I have trouble finding the proper way to do this.
Is anyone able to help me modify my code so it does what I want it to do?
Thanks in advance.
Code I'm using:
$(function(){
$('#background img:gt(0)').hide();
setInterval(function(){
$('#background :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('#background');},
3000);
});
You can use JQuery .animate() to toggle horizontally. For example:
$('#background :first-child').animate({width: 'toggle'})
.next('img').animate({width: 'toggle'})
.end().appendTo('#background');},
3000);
Related
EDIT: Changed hover to click.
EDIT2: Ended up putting a 0.6 opacity copy div below it and applied the same animation and fadeOut to it, then made it fadeToggle on click which is working, but lags a bit. Any more efficient solutions are welcome!
I have a click function for a div element that's not working. I want the click to restore opacity to a previously faded element (that part works fine) but after hours of trying it's just not happening.
$(document).ready(function(){
$(document).scroll(function() {
$(".circle-nav-element-sm").animate({
left: '100px',
}, "slow");
$(".circle-nav-element-sm").fadeTo("slow", 0.6);
});
});
//Above part works fine.
$(document).ready(function(){
$(".circle-nav-element-sm").click(function() {
$(".circle-nav-element-sm").fadeIn("fast");
});
});
Can anyone see an obvious solution?
The jQuery fadeIn() method is used to fade in a hidden element.
At first make sure your circle-nav-element-sm div is hidden or not.If it is hidden it works for you if it is not please make sure it is hidden.
try using
$(document).ready(function(){
$(".circle-nav-element-sm").hover(function() {
$(".circle-nav-element-sm").fadeTo("fast",1);
});
});
I'm guessing fadeTo doesn't work well with fadeIn and fadeout
fadeIn vs fadeOut vs fadeTo
I've tried to find the code for this problem for ages but nothing works exactly the way I wanted.
So, is it possible to make smooth scroll down of 1000px automatically after the page has loaded ($(document).ready)? I take that some jquery is probably needed to achieve the animation effect, but I have no clue how to do it. Any help would be appreciated, thanks.
$(document).ready(function(){
$('body').animate({'scrollTop': '1000px'}, 2000);
}
$(document).ready(function(){
$('body').animate({scrollTop:1000}, 500);
});
Here's the fiddle! http://jsfiddle.net/2LEz3/1/
I'm putting together a site where a client has requested a very specific animation in the quicklink scroller.
I've used jquery animate and jquery fadeIn to complete a glass-shine and glow effect on hover, but when hovered once or twice (partcularly if done in quick succession) it stops happening?
Link: http://clientzone.fifteenten.co.uk/visioncode/html
$('.fadehover').append('<div class="hover"></div>');
$('.fadehover').hover(
function() { $(this).children('div.hover').animate({"left": "+=505px"}, 300);},
function() { $(this).children('div.hover').css({left: "-=" + 505});
});
$('.fadehover a').hover(
function() { $(this).children('div.qlink_glow').fadeIn('fast')},
function() { $(this).children('div.qlink_glow').fadeOut('fast');
});
Any assistance would be hugely appreciated I'm so confused... I've had this happen on other hover effects too
Try .stop(true,true) before .animate, .fadeIn and .fadeOut
This error occurs on your element if you hover in before your last animation finished. A first attempt to me would be trying if it helps to stop the animation before beginning a new one:
$(this).children('div.qlink_glow').stop(true,true).fadeIn('fast');
I'll have to test it, can't say for sure if this will work, just a possibility you could try.
I'm trying to animate some tab contents I've made. It works smoothly when fading the content out, but fading it in doesn't. The content just appears suddenly instead of fading in.
Please check my code here: http://jsfiddle.net/rqsJ8/2/
I've tried everything I can think of, but I can't figure why this is happening.
Please enlighten me.
Many Thanks
http://jsfiddle.net/rqsJ8/25/
Changed to use fadeIn and fadeOut.
I have updated the version with a new code and saved it on fiddle and here is the link: http://jsfiddle.net/rqsJ8/61/
you didn't probably mention a time for speed..
tabContent.animate({ opacity: 0 }, function() {
$(this).removeClass('selected');
}, speed );
I tried this:
$('#hidden_div').fadeIn();
But the div that I want to smoothly slide down, just teleports itself to its next position. (I want it to slide smoothly to it)
Then this:
$('#sliding_div').animate({marginTop: '+=400px'},1000);
$('#hidden_div').fadeIn();
But I didn't get the right effect.
How can you achieve that? Thanks in advance.
$('#sliding_div').animate({marginTop: '+=400px', opacity:1},1000);
and before, set #sliding_div opacity to 0
If I've understood the effect you're after, you need to fadeIn() the second div after the animate() has completed. You can use the callback parameter of animate() to do this:
$('#sliding_div').animate(
{ marginTop: '+=400px' },
1000,
function() {
$('#hidden_div').fadeIn();
}
);
Here is a smoother version: http://jsfiddle.net/W8AtL/4/
This fixes the jump from it being marginTop.