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);
});
});
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've got this script that I have been working on and I need it to fade in and move up by it's height. If I remove the .animate() it fades in so i'm guessing theres something wrong there.
function showDesc (){
$(".container-box").hover(function(){
$(this).find(".contain-desc").fadeIn('slow').animate({
'bottom':'130px'
}, {duration: 'slow', queue: false;}
},function(){
$(this).find(".contain-desc").fadeOut();
});
}
I do have to use the old fashioned way of onmouseover="" in the html and below is my complete code so far, thanks.
http://jsfiddle.net/silverlight513/KuJkY/
The error is here:
{duration: 'slow', queue: false;}
You have terminated the statement with a semi-colon(;)
Change it to:
{duration: 'slow', queue: false}
EDIT:
There were a couple more errors in your code. I have updated the function:
function showDesc (){
$(".container-box").hover(function(){
$(this).find(".contain-desc").fadeIn('slow').animate({
'bottom':'130px'
}, {duration: 'slow', queue: false});//This was not closed
},function(){
$(this).find(".contain-desc").fadeOut();
});
}
I have a webpage with a div container that contains the main content, and inside it there is a div that should appear when I put my mouse in the container. This is the code that I tried:
var running=0;
var running2=0;
$('div.container').mouseenter(function()
{
if (running==0)
{
running=1;
$('div.rightcontainer').css("margin-right",-350)
.animate({marginRight:0}, 750, function(){running=0;});
}
}
);
$('div.container').mouseleave(function() {
if (running2==0) {
running2=1;
$('div.rightcontainer').css("margin-right",0)
.animate({marginRight:-350}, 750, function(){running2=0;});
}
});
This code works:
$('div.container').mouseenter(function() {
console.log('trigger');
$("div.rightcontainer")
.css("visibility","visible")
.css("margin-right",-$("div.rightcontainer").width())
.animate({
marginRight:0
}, 1200);
});
$('div.container').mouseleave(function() {
console.log('leave');
$("div.rightcontainer")
.css("visibility","visible")
.css("margin-right", "320")
.animate({
marginRight:-350
}, 1200);
});
However, the problem is that if the mouse enters multiple times, the object keeps entering and exiting.
Edit:
The .one() only does it once, what I mean is in a way it stacks all the enters and exits and performs the animation that many times.
the .stop() solution was better, however the animation would jump to the end from wherever it was. If there is a way for, if the mouse leaves the container mid-animation, for the animaiton to stop where it is and animate back the other way?
Here is a JSFiddle with a simplified version of the website. The container is anything below the navbar. http://jsfiddle.net/yEzXp/
Use .stop()
$('div.container').mouseenter(function() {
$("div.rightcontainer")
.stop(true, true)
.css("visibility","visible")
.css("margin-right",-$("div.rightcontainer").width())
.animate({
marginRight:0
}, 1200);
});
$('div.container').mouseleave(function() {
$("div.rightcontainer")
.stop(true, true)
.css("visibility","visible")
.css("margin-right", "320")
.animate({
marginRight:-350
}, 1200);
});
I'm attempting to make something similar to github's project viewer where after clicking a link the box moves to the left out of scene and then another box moves in from the right.
The way I attempted to do this is to have just a single div that's animated, and when you click the link the div moves to the left off the screen. Then in the callback of the first animate(), I call .css to move it to the right side of the page (without animating, so it just jumps there) then animate it again to move it back into view from the right.
Here's the JS
$('.mLink').on('click', function(e) {
var
marginR = $('#mover').css('margin-right'),
marginL = $('#mover').css('margin-left');
$('#mover').animate({
'margin-left': '-1500px',
'margin-right': '1500px'
}, 500, 'ease-out', function() {
$('#mover').css({
'margin-left': '1500px',
'margin-right': '-1500px'
});
$('#mover').animate({
'margin-left': marginL,
'margin-right': marginR
}, 500, 'ease-in');
});
});
So what happens is that it animates to the left of the screen then jumps to the right side correctly but then appears in the proper location without actually doing the animation. I'm curious why this is occurring because it means animate() is executing just not showing the animation?
EDIT: for clarification
Try something like this, as I am not able to see all dependencies, and thus not able to create fiddle for the same,
$('.mLink').on('click', function(e) {
var
marginR = $('#mover').css('margin-right'),
marginL = $('#mover').css('margin-left');
$('#mover').animate({
'margin-left': '-1500px',
'margin-right': '1500px'
}, 500, 'ease-out', function() {
$('#mover').animate({
'margin-left': ' 1500px',
'margin-right': '-1500px'
}, 500, 'ease-in', function() {
$('#mover').animate({
'margin-left': marginL,
'margin-right': marginR
}, 500, 'ease-in', function(){return false;});
});
});
});
I hope this will do, as you want two effects you can have two functions. :) or more if you want or all together in one function.
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