I want a photo/caption to be toggled on a webpage.
The user clicks, the photo comes up followed by the caption.
The user clicks again, the caption goes away then the photo goes away.
The user clicks, the photo comes up followed by the caption.
On the third click, the photo rapidly appears (does not animate).
Here is my code.
(jQuery-1.8.1.min.js)
$(document).ready(function() {
$('#photo').width(0).height(0).css('opacity',0);
$('#caption').hide();
$('#box').toggle(
function() {
$('#photo').stop().show().animate(
{
width: '400px',
height: '300px',
opacity: 1
}, 500, function() {
$('#caption').stop().fadeIn(500);
}); //end animate
},
function() {
$('#caption').stop().hide(function() {
$('#photo').stop().fadeOut(500);
});
}
); // end toggle
});
Any suggestions?
Need more code?
UPDATE
In order to get the image to animate-in every time it is toggled, then the image has to animate-out.
EDIT2
updated the JSFIDDLE
EDIT:
Another problem showed up, this time with animation.
The jsFiddle works fine but when used with an actual image it does not animate after the first cycle.
I'm trying to stick with your original code (I just added .show() in between the photo's stop and animate calls), but I can't see what's wrong. It seems to work, see jsFiddle here.
UPDATE: I changed the "hide" function per poster's request & also updated the jsFiddle code to reflect this.
$(document).ready(function() {
$('#photo').width(0).height(0).css('opacity', 0);
$('#caption').hide();
$('button').toggle(
function() {
console.log("show");
$('#photo').stop().show().animate({
width: '400px',
height: '300px',
opacity: 1
}, 100, function() {
$('#caption').stop().fadeIn(1000);
}); //end animate
},
function() {
console.log("hide");
$('#caption').stop().hide(function(){
$('#photo').stop().animate({
width: '0px',
height: '0px',
opacity: 0
}, 100);
});
}
);
});
EDIT 3: updated code to work after one cycle : http://jsfiddle.net/kLEFy/17/
$(document).ready(function() {
$('#photo').width(0).height(0).css('opacity', 0);
$('#caption').hide();
$('body').toggle(
function() {
$('#photo').stop().show().animate({
width: '400px',
height: '300px',
opacity: 1
}, 1000, function() {
$('#caption').stop().fadeIn(1000);
}); //end animate
},
function() {
$('#caption').stop().hide(function(){
$('#photo').stop().fadeOut();
$('#photo').width(0).height(0).css('opacity', 0);
});
}
);
});
Related
When button.btn is clicked, div.img-box will move with animation.
I'd like to change the animation depending on the place of div.img-box.
First I click the button, it moves collectly.
Second I click, the image whose margin-right is now 10px does not move.
I have this code.
js
$(function(){
var mr = parseInt($('.img-box').css('margin-right'), 10);
$(".btn").click(function(){
if (mr == 10) {
$(".img-box").animate( { marginRight: '300px' }, 'slow' );
} else {
$(".img-box").animate( { marginRight: '10px' }, 'slow' );
};
});
});
html
<button class="btn"></button>
<div class="img-box"><img src="xxx.png"></div>
css
.img-box{
float: right;
width: 250px;
height: 350px;
margin: 200px 25%;
}
How do I fix it?
You need to put var mr = parseInt($('.img-box').css('margin-right'), 10); inside the click() function.
$(function(){
$(".btn").click(function(){
var mr = parseInt($('.img-box').css('margin-right'), 10);
if (mr == 10) {
$(".img-box").animate( { marginRight: '300px' }, 'slow' );
} else {
$(".img-box").animate( { marginRight: '10px' }, 'slow' );
};
});
});
JSFiddle
Your anonymous function is called only once, so that "mr" is only calculated once, so that when the function to attached to your button is called, it's using a global variable that was set to 200. even after it moves, the mr variable is still 200, because you never updated the variable.
imtheman seems to have answered this as i was typing this out, but he's right, put the mr variable definition in the function so that it's calculated every time the button is clicked, rather than one time when the javascript is run.
I am using the following functions to grow the text box and display the submit button on focus and shrink and hide the button on blur.
But the button shows and hides before the animation is complete.
I am looking to create a neat slide down and slide up animation.
$('#venue-write-review').focus(function() {
$(this).animate({ height: '96px' }, 500);
$('#submit-review').show();
});
$('#venue-write-review').blur(function() {
$(this).animate({ height: '48px' }, 500);
$('#submit-review').hide();
});
You can specify a callback to the animate function to be executed once the animation is done.
$('#venue-write-review')
.focus(function() {
$(this).animate({ height: '96px' }, 500, function () {
$('#submit-review').show();
});
})
.blur(function() {
$(this).animate({ height: '48px' }, 500, function () {
$('#submit-review').hide();
});
});
This is all you need And don't forget to use .stop()!
$('#venue-write-review').on('focus blur',function(e){
$(this).stop().animate({ height: e.type[0]=="f"?96:48 }, 500, function(){
$('#submit-review').toggle();
});
});
e.type[0]=="f" ij just to check in a Conditional Operator (?:) if the passed event's first [0] character is f (focus; else logically it's blur)
Read the jQuery docs about the methods: .on(), .toggle(), stop() .animate() callback and on the MDN website read about Conditional operator
Also in jQuery if you don't need to animate by % or some other measure, you don't need to specify 'px' cause it's default.
You can use complete callback. Check the docs (under options section):
A function to call once the animation is complete.
Like this:
$('#venue-write-review').focus(function() {
$(this).animate({
height: '96px'
},
{
duration: 500,
complete: function() {
$('#submit-review').show();
}
}
});
});
$('#venue-write-review').blur(function() {
$(this).animate({
height: '48px'
},
{
duration: 500,
complete: function() {
$('#submit-review').hide();
}
}
});
});
I have a button that I want to click (in my case this is '.circle'). When I click it, I want the #data div to fade in then animate with a 'margin-top:50px'. Then when the user clicks the toggle button the second time it animates to 'margin-top:0px' then fades out.
However the problem I have run into is that when I click the toggle the third time I would expect it to run the first function again. But instead it does something weird and resets to a margin-top of 50px before the first function is run again.
I would really appreciate some help with this. Here is a JSFiddle I whipped up with identical code and you will see the problem i'm having after clicking it multiple times. Also another problem was when you click it for the first time it doesn't work, but works on the second click.
http://jsfiddle.net/sN8Tn/
Ill also post the bit of jquery below:
$(".button").click(function(){
$(".button").toggle(
function(){
$("#showme").fadeIn(500,
function(){
$("#showme").animate({ "margin-top" : "50px" }, 500, 'linear');
}
);
},
function(){
$("#showme").animate({ "margin-top" : "0px" }, 500, 'linear',
function(){
$("#showme").fadeOut(500);
}
);
});
});
Remove the .click() function. The click is implied with the .toggle() function. jQuery .toggle() jsFiddle
$(".button").toggle(
function() {
$("#showme").fadeIn(500, function() {
$("#showme").animate({
"margin-top": "50px"
}, 500, 'linear');
});
}, function() {
$("#showme").animate({
"margin-top": "0px"
}, 500, 'linear', function() {
$("#showme").fadeOut(500);
});
});
I have a navigation bar that slides down, very easy, and when that's complete, a small pixel sized line goes across it all to separate sub pages.
When you hover your mouse over it very quickly, it tends to stay visible. As you can see from the filter and stop functions, I don't want any jumpy things happening - it would be great for all of it to be really smooth.
Is there any way of getting this to work smoothly, regardless how retarded the user is as well as it being super responsive?
$(".menu").hover(function() {
$(".children").filter(':hidden').slideDown(300, function() {
$(".menu-line").stop(true, false).animate({ width: "903px" });
});
}, function() {
$(".menu-line").stop(true, false).animate({ width: "0px" }, function() {
$(".children").slideUp(300);
});
});
Working example: http://jsfiddle.net/varFS/
Titanium, you must use timeout for hiding your menu to get desired result:
$(".children").css("padding-top", "21px").hide();
$(".menu").hover(function() {
$(".children").filter(':hidden').slideDown(300, function() {
$(".menu-line").stop(true, false).animate({
width: "400px"
});
});
}, function() {
setTimeout(function() {
if (!$(".menu, .menu ul, .menu ul li").is(':focus')) {
$(".children").css("padding-top", "21px").hide();
}
$(".menu-line").stop(true, false).animate({
width: "0px"
}, function() {
$(".children").slideUp(300);
});
}, 400);
});
Working Example
Right now I have a div that slides right to left and then vice versa back to its original place. But overall its not really how I want it to work. My main goal: is for the user to hover over the main div which will then pull out the sliding div. The part that gets tricky is the following: If the user forgets to slide the dive back, I want to give it time frame that will cause it to close automatically after a certain time has passed. Here is my working code so far: jsfiddle.net/eMsQr/14/.
My JavaScript function:
$(document).ready(function() {
$("#arrow").hover(
function(){
$("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500 );
},
function(){}
);
});
$("#arrow").click(function(e){
$("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500 );
});
Try this: http://jsfiddle.net/vansimke/cJ5pf/
I hooked into the mouseleave event and added a setTimeout. You might need to catch the timeout if you need to cancel it later (i.e. they reenter the arrow)
Here's a jsFiddle example that sets a 3 second delay via the setTimeout function.:
jQuery
var cto;
$("#arrow").hover(
function() {
clearTimeout(cto);
$("#inner").stop().animate({
marginRight: "0px",
opacity: "1px",
height: "100px"
}, 500);
}, function() {
cto = setTimeout(function(){$('#arrow').trigger('click')}, 3000);
});
$("#arrow").click(function(e) {
$("#inner").stop().animate({
marginRight: "-100px",
opacity: "1px",
height: "100px"
}, 500);
});
Note that if the user moves his mouse away and then returns it to the div, the box remains open again until they leave at which point the 3 second countdown timer begins.
You need to make sure you utilize the second function() in jQuery's hover method.
At the moment you're only animating your slide-out div when the user hovers over the main div. You want it to also animate on hover out.
Here's the updated jsFiddle.
Inside the hover function you can add an additional line to trigger the click event using the below line:
setTimeout(function() { $("#arrow").trigger('click'); }, 5000);
the 5000 is the number of milliseconds to wait before triggering the click.
see the fiddle here: http://jsfiddle.net/eMsQr/51/
it uses the mouseleave jquery and also delay. Change the value in the delay to get the time you want.
$("#arrow").mouseleave(function(){
$("#inner").stop().delay(500).animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500 );
});
You need to use setTimeout() to set the delay to closing the div. You also need to use clearTimeout() in the opening function to stop it auto closing if someone mousesout, then back over again:
var timeout;
$("#arrow").hover(
function() {
clearTimeout(timeout); // clear the timer which will close the div, as we now want it open
$("#inner").stop().animate({
marginRight: "0px",
opacity: "1px",
height: "100px"
}, 500);
}, function() {
timeout = setTimeout(function() {
$("#inner").stop().animate({
marginRight: "-100px",
opacity: "1px",
height: "100px"
}, 500);
}, 1000); // close the open div 1 second after mouseout.
}
);
Example fiddle