Any ideas on how to animate the width and height of a div from the top center?
Tried using effect('scale') but this is based on a show/hide so snaps back after completion.
Then tried a normal animate:
$('.box').animate({'width':200px,'height':200px,margin-left:-100px});
This works, but as there is a line of .box, I want the others to react and push to one side.
Fine Tuned
FIDDLE
$('.day').hover(function() {
if($(this).index()==0){
$(this).animate({'width':400,'height':400}, 500);
}else{
$(this).animate({'width':400,'height':400}, 500);
$(this).parent().stop().animate({'margin-left':'-100'} , 500);
}
}, function() {
$(this).animate({'width':200,'height':200}, 500);
$(this).parent().stop().animate({'margin-left':'0'}, 500);
});
Maybe like this:
$('.day').hover(function() {
$(this).animate({'width':400,'height':400, 'margin':'-100px -90px'});
}, function() {
$(this).animate({'width':200,'height':200, 'margin': '0 10px'});
});
Fiddle: http://jsfiddle.net/dmYY3/3/ ?
Related
This is basically my current website:
https://jsfiddle.net/s0wgnvk2/
And now I have the problem in the #About section when I click right it goes to #right section and, you can't see it in fiddle but in my webpage the transition is really smooth and I like it how it is, but I just don't know how to make it work for the left side since it is positioned left:-100%.
$(function() {
$('#About a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
});
I know about the fullPage.js plugin but I'd like to have my own solution and web layout even thought fullPage is probably a lot better.
I would appreciate if you could help me out
EDIT
Fiddle corrected: https://jsfiddle.net/s0wgnvk2/1/
scrollLeft denotes the scroll bar position from the left, see ref here. So it cannot be negative (the left most position is 0).
What you need might be marginLeft, try:
$('html, body').animate({ marginLeft: '100%' });
Here is a working jsfiddle example. Note that I have make the header position: fix, so that it knows where to anchor and how to width itself when the left margin of the element changes.
Use animation not scroll
see what issue you face when you use scroll https://jsfiddle.net/kevalbhatt18/s0wgnvk2/4/
And as you said in your site animation is working smoothly and not in fiddle
that is because you haven't selected jauery from droupdown which is
present in left side of fiddle editor so your animation is not working so if you see your console it will give you Uncaught ReferenceError: $ is not defined in your example https://jsfiddle.net/s0wgnvk2/
Left right animation Example: https://jsfiddle.net/kevalbhatt18/vunL9ec2/
$('#About a').bind('click', function (event) {
var $anchor = $(this);
if ($anchor.context.innerHTML === "RIGHT" ) {
$($anchor.attr('href')).stop().animate({
left: '-=100%'
}, 1000);
} else if ($anchor.context.innerHTML === "LEFT") {
$($anchor.attr('href')).stop().animate({
left: '+=100%'
}, 1000);
} else {
console.log($(this).context.offsetParent.id )
$('#'+$(this).context.offsetParent.id ).stop().animate({
left: $(this).context.offsetParent.id ==='right'?'+=100%':'-=100%'
}, 1000);
}
I am having trouble sliding a div from the left side, I have done this before and it worked fine but i'm not sure this time for some reason it doesnt really slide at all.
it seems to slide a couple milimeters then appears to .show the rest of the div.
I have tried
$('#menu_area').toggle('slide', { direction: 'left' }, 1000);
and
var left = $('#menu_area').offset().left;
$("#menu_area").css({left:left}).animate({"left":"140px"}, 500, function(){
this is my link
http://2click4.com/new/place2.php?id=CoQBcQAAAGqvOgbp0tJu7kVVn9hxur12lk85dSxYZiWj_2w8aL8yzahacGeo1h9ZZ0cAn2enEK7LirrOR8KBCzDhEdmpRbzlJt8000Ufvbct6lP4VUYQkSDXHq6YdFH_w799dw4HUcIz8pimNOdnIRS3hF8DoAt6RfZn7zC-cLgVvnSH7KdrEhDN4vYCBQkmmat2HkYPJ1S6GhRxB-UeiOXywY_f5qRgL19SVKUCag
DEMO http://jsfiddle.net/BywL4/
try to animate width if oyu want sliding effet as show in above link
$(document).on('click','button',function(){
if($("#expand").css('width') == '0px') {
$("#expand").animate({"width":"500px"}, "slow");
} else {
$("#expand").animate({"width":"0px"}, "slow");
}
});
I am trying to make 7 of my "cards" img(s) slide in from the left to the center of the screen like they are now. I tried using:
function FetchCards() {
$("#pack").css('margin-left', 0);
$("#pack").css('margin-right', 0);
$("#pack").animate({
left: '-1000px'
}, 'slow');
};
setTimeout(FetchCards, 7000);
But it's not working, not sure where I should declare the function "FetchCards", etc. Please help. Here is my current code:
http://plnkr.co/edit/L4wgzTDcV86tZK1eE23D?p=info
What I'm asking is where do I declare the function "FetchCards" and would my code work for making the images invisible until they slide in?
Try this:
function FetchCards() {
$("#pack").css('margin-left', 0);
$("#pack").css('margin-right', 0);
$("#pack").animate({
'margin-left': '-1000px'
}, 'slow');
}
setTimeout(function(){FetchCards();}, 7000);
see my example and tell me if it look like what you needed...
EXAMPLE HERE: http://jsfiddle.net/CAqE4/
JS:
function FetchCards() {
$("#pack").css({
'margin-left': 0,
'margin-right': 0
}).animate({
left: '-=1000px' // -= subtracts the number of pixel
},function(){
//this function will be called after #pack animate
$(/*IMAGE SELECTOR*/).fadeIn(); //insert the image selector
});
};
setTimeout(FetchCards, 7000);
CSS:
Your image must have display:none in css.
Someone know how convert a bottom position to top with CSS transition and jQuery?
I need to change the anchor of my image. And i have this problem. There is a conflict between bottom and top.
EDIT : In my scenario, the image has 100% of the width of the screen. And when the window is resized, i have a code in JS whoes get the new position of the image. If my anchor is always "top" for example, in some situations I have this hole who show-up for severals milliseconds and if I set at this moment bottom instead of top it will fix my issue. But I have this "jump" in the animation.
I made this fiddle to understand my issue.
Sorry for my English! Someone have an idea about this? Thank you !
You can get around the jumps by using a class, and removing the inline style as you go, like so:
if ( image.hasClass("bottom") ) {
image.css("bottom", "").animate( { top: "0" } , 1000, function(){
image.removeClass("bottom");
});
} else {
image.css("top", "").animate( { bottom: "0" } , 1000, function(){
image.addClass("bottom");
});
}
and add a css class
.bottom {
bottom: 0;
}
as per http://jsfiddle.net/rZPq3/
edit for cross-browser:
var top = image.position().top + 'px';
var bottom = image.parent().height() - image.height() + 'px';
if (image.hasClass("bottom")) {
image.finish().css({ "bottom": "", "top": top }).animate({ top: "0px" }
, 500, function () { image.removeClass("bottom"); });
} else {
image.finish().css({ "top": "","bottom": bottom }).animate({bottom:"0px"}
, 500, function () { image.addClass("bottom"); });
}
http://jsfiddle.net/wCuuX/
You should stick with one of the properties to avoid conflicts. I changed your fiddle to use top only and using a class to toggle the value instead.
var toggle = $("button#toggle");
var image = $("div img");
toggle.click(function () {
image.toggleClass("toggled");
});
See updated test case on jsFiddle.
http://jsfiddle.net/E6cUF/
The idea is that after the page finished loading the grey box slides left from behind the green box, if possible bounce a little.
Edit: made a new version based on changes people made to the jsfiddle and the comment from Nicola
http://jsfiddle.net/RBD3K/
However the grey one should be behind the green one and slide from right to left so it appears
To have it bounce you are missing two things i think:
1) you need to load jquery UI.
2) put the bounce effect after the animate effect:
$('#test').click(function() {
var $marginLefty = $('.left');
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() :
0
}).effect("bounce", { times:5 }, 300);
});
updated fiddle: http://jsfiddle.net/nicolapeluchetti/E6cUF/4/
Try this . Not sure if this is what you want.
$('#test').click(function() {
var $marginLefty = $('.left');
var $marginRight = $('.right');
$marginLefty.animate({
marginLeft: 0
},{ duration: 200, queue: false });
$marginRight.animate({
marginLeft: 100
},{ duration: 200, queue: false });
});
Update: from your updated fiddle,add for .right position :absolute;z-index:1000 as css
http://jsfiddle.net/E6cUF/11/