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.
Related
I'm foolin around with the jquery hover functionality. the current code snippet looks like this:
$leftColumn.children().first().hover(
function(event) {
var $this = jQuery(this);
$this.css({
'background-color': '#505050'
}).parent().stop()
.animate(
{
'z-index': '999',
width: '220px'
},
{
duration: '1000'
}
);
},
function(event) {
var $this = jQuery(this);
$this.parent().stop()
.animate(
{
width: '38px',
'z-index': '1'
},
{
duration: '1500',
complete: function() {
$this.css({
'background-color': 'transparent'
});
}
}
);
}
);
What this basically does is increasing the width of a div (which is position absolute) to overlay another div.
I choosed to use jQuerys animate() functionality instead of CSS3s transition because I want to trigger a callback whenever the closing (decreasing the width again) animation is done.
My problem now is, that I want to delay the closing animation for 2 seconds (and yes I know about the delay() vs setTimeout() discussion) which worked fine with setTimeout(). However as the animation is timed out for the given duration it will run, even if I enter the hoverable area again. This of course makes sense as the stop() only triggeres while an animation is on the go, which is not the case if it is timed out.
How can I make this thing work (stop the closing animation when reentering the hoverable area) and still keep a timeout / delay before decreasing the width on "hover leave"?
So
I am trying to build some navigation using jquery transit
The opens/slide down navigation is working fine. It sets the child ul to display block and then runs the animation/transition.
The issue is occurring when closing the navigation item. The ul gets hidden immediately diespite being written inside the callback. I've also added a console log of 'animation ended' once the transition has finished and this is firing at the right time, so not sure why the ul is being hidden immediately.
The jquery/js looks like this:
var dropDown = (function(){
var mainNav = $('#mainNav');
var navA = mainNav.find('li a');
var navUL = mainNav.find('ul');
var iconAll = mainNav.find('i');
navUL.transition({
'max-height': '0px',
'height': '0px',
'overflow': 'hidden',
'display': 'none'
});
navA.on('click',function(){
var nextUL = $(this).next();
var icon = $(this).find('i');
var nextULHidden = nextUL.css('display') === 'none';
if(nextULHidden) {
nextUL.css('display','block').transition({
duration: 1000,
'height': 'auto',
'max-height': '1000px',
easing: 'ease-in'
});
$(this).addClass('active');
icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
console.log('hidden');
}else if(!nextULHidden){
nextUL.transition({
duration: 1000,
'height': '0px',
'max-height': '0px',
easing: 'ease-in',
complete: function(){
nextUL.css('display','none');
console.log('animation ended');
}
});
$(this).removeClass('active');
icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
console.log('visible');
}else{
console.log('some error');
}
return false;
});
}());
And I have a fiddle here that can be tinkered with: http://jsfiddle.net/lharby/o5w8ebu8/2/
I've tried various combinations of using css visibility, jquery show() and hide() functions, but each time the ul vanishes as the transition starts (on click effectively). And I've tested Chrome, Firefox and Safari just in case there were any anomalies.
I believe the callback is firing at the correct time (after 1000 milliseconds) the problem is that the transition animation isn't working.
Changing to 'height': 'auto' on the shrinking transition seems to achieve the effect you are after. Though I can't say I really know why.
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
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 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);
});
});