I am trying to create an image transition aka slideshow, like they have on:
www.teamgeek.co.za/ - the first image on the left you see!, it works by just having a script which changes the opacity of the images.
I have started to try and make something like this, here is my progress:
http://jsfiddle.net/pYECC/1/
$( "#change" ).click(function() {
$( "#image1" ).fadeTo( "slow" , 0, function() {
$("#image2").fadeTo("slow" , 1, function(){
$("#image3").fadeTo("slow", 1, function(){
});
});
});
});
Now my problem is that, I need the transition to be slower then "slow", because it just doesn't feel as slow and "correct" as the one seen on teamgeek's site.
Slower than slow - http://jsfiddle.net/pYECC/2/
$("#change").click(function() {
$("#image1").fadeTo(5000 , 0, function() {
$("#image2").fadeTo(5000 , 1, function(){
$("#image3").fadeTo(5000, 1, function(){
});
});
});
});
Related
I'm trying to make a toggle button, so when you click once on #mbtn, it must be set to top:0px and when you click a second time, it must be set to top:-110px.
Here is the code I'm using but it seems like it's not working, where am I wrong?
<script>
$(document).ready(function() {
$('#mbtn').toggle(
function() {
$('.menu').animate({
top: "0px"
}, 500);
},
function() {
$('.menu').animate({
top: "-110px"
}, 500);
}
);
});
</script>
Per jQuery API, you have to use toggle with an action, such as click. For example:
$( "#mbtn" ).click(function() {
$( ".menu" ).toggle( "slow", function() {
// Animation complete.
});
});
JSfiddle
I assume you were trying to hide the menu bar? if so, take a look at .slideToggle() instead. Here is the JSfiddle example.
I just coded a menu that has an animation in javascript. The script works as it should but I don't like that if you navegate throught the items from up to down, the menu gets really buggy and the texts start to display like crazy. A possible solution is, that when the mouse enters to a list item, it has to have a certain delay for the animation to start (for example, you must have the mouse there 3 seconds, if not, nothing happens). setTimeout won't do it, because it will execute the animation anyway. I am wondering if there is a work around this, because i can't come up with any.
this is the code that does the animation:
$( '.menu li a' ).hover( function(){
var el = $(this);
var numero = el.parent().index();
el.animate({
'height': height[numero]+'px'
}, 'slow');
}, function(){
$(this).animate({
'height': 0
}, 'slow');
});
jsfiddle here
I am trying to attempt this without using css Transitions. Thank you very much!
Try to stop the previous animation queue by using .stop(),
$( '.menu li a' ).hover( function(){
var el = $(this);
var numero = el.parent().index();
el.stop().animate({
'height': height[numero]+'px'
}, 'slow');
}, function(){
$(this).stop().animate({
'height': 0
}, 'slow');
});
DEMO
How can I stop a jquery effect after it's first execution on a mouseover? I want the box to bounce once and stop even if the mouse remains inside the box and repeat this for every time the mouse goes back into the box. Currently it runs the effect infinitely when mouse is inside the box. Thanks in advance.
I have made an example on jsfiddle
I tried:
one("mouseover", function() { $( "#div1" ).effect("bounce", "slow"); });
However this will not fire the event again when you leave the box and come back into it.
.one() works:
$( "#div1, #div2" ).one('mouseover', function() {
$(this).effect("bounce", "slow");
});
Demo: http://jsfiddle.net/Rxhzg/1/
UPDATE (based on updated question)
If by "on mouseover once" you mean just "one bounce" - add times parameter:
$( "#div1, #div2" ).mouseenter(function() {
$(this).effect("bounce", { times: 1 }, "slow");
});
DEMO 2 http://jsfiddle.net/Rxhzg/4/
$( "#div1, #div2" ).one('mouseover', function() {
$(this).effect("bounce", { times: 1 }, "slow");
});
$( "#div1, #div2" ).mouseleave(function() {
$(this).one('mouseover', function() {
$(this).effect("bounce", { times: 1 }, "slow");
});
});
check this http://jsfiddle.net/Rxhzg/6/
OR check this one http://jsfiddle.net/Rxhzg/8/ because the above one will continue bounce if mouse is at bottom of box.
$( ".parentDiv" ).one('mouseover', function() {
$(this).find('.navBox').effect("bounce", { times: 1 }, "slow");
});
$( ".parentDiv" ).mouseleave(function() {
$(this).one('mouseover', function() {
$(this).find('.navBox').effect("bounce", { times: 1 }, "slow");
});
});
This example is similar to other answers, however it abstracts the original bind into a function for reusability.
var $target = $( "#div1, #div2" );
function bounce() {
$target.one('mouseover', function () {
$(this).effect("bounce", { times: 1 }, "slow");
});
}
$target.on('mouseout', bounce);
bounce();
I'm trying to slide out a div, and once complete, fade in content with a .load request.
I'm not sure why this is incorrect, but this stops the animate and load completely:
$('.films').click(function(){
$('.content-home').animate({left: "+=150%"}, "slow", function(){
$( ".wrapper" ).load( "films.php", function(){
$(this).fadeIn();
});
});
});
However, by reverting to this code, it still loads the content without any animation or fade:
$('.films').click(function(){
$('.content-home').animate({left: "+=150%"}, "slow");
$( ".wrapper" ).load( "films.php");
});
Would anyone know why the first example does not perform as requested?
Use this for animate()
$( 'content-home' ).animate({ opacity: 0.25, left: "+=50",height: "toggle"},
5000,
"slow",
function() {
// your remaining code
});
I have a simple jQuery code which swaps two images by hiding one and displaying the other, I'm seeking to swap the images using a fade in fade out effect, but since the two images aren't lying on top of each other I cant simply fade the top image resulting on showing the bottom one,
I want to fade the first image then set the css display property to none then show the second image with 0 opacity and gradually set the second images opacity to 100. But when I add the code which fades the images, it doesn't work and the display none doesn't wait for the fade to finish. How can I make the functions wait for the one before to finish?
$('.thumbs').hover(
function() {
console.info('in');
$(this).children('.first').css('display','none');
$(this).children('.second').css('display','block')
},
function() {
console.info('out');
$(this).children('.second').css('display','none');
$(this).children('.first').css('display','block')
}
);
HTML Code:
<div class='thumbs'>
<div class='first'><?php the_post_thumbnail()?></div>
<div class='second'><?php MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image');?></div>
</div>
1) delay() method allows us to delay the execution of functions that follow it in the queue.
http://api.jquery.com/delay/
$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
2) use callbacks
$("#divId1").animate({opacity:.1},1000,function(){
$("#divId2").animate({opacity:.1},1000);
});
Like so:
setTimeout(function() {
console.log('out');
$(this).children('.second').css('display', 'none');
$(this).children('.first').css('display', 'block');
}, 1000);
I have not tested but this should do the job:
$('.thumbs').hover(
function(){
var $that = $(this);
$(this).children('.first').fadeOut(1000, function(){
$(this).css('display','none');
$that.children('.second').fadeIn(500);
});
}
,
function(){
var $that = $(this);
$(this).children('.second').fadeOut(1000, function(){
$(this).css('display','none');
$that.children('.first').fadeIn(500);
});
}
);
Try
$('.thumbs').hover(
function() {
var second = $(this).children('.second');
$(this).children('.first').fadeOut(1000, function(){
second.fadeIn(1000,function(){});
});
},
function() {
var first= $(this).children('.first');
$(this).children('.second').fadeOut(1000, function(){
first.fadeIn(1000,function(){});
});
}
);
Working Fiddle