I have two sites I'm working on where I use jQuery to animate some objects via CSS properties. Everything works fantastic in Firefox but there ware some webkit bugs where my objects disappear and reappear off screen before the animation starts.
http://coreytegeler.com/gl/ (click the text box)
$('#front-nav-wrapper').css({'position' : 'fixed','top': '55px', 'opacity' : '1' });
http://coreytegeler.com/justin/ (click any of the boxes)
$("#nav ul li").click(function() {
$("#nav ul li#a").animate({'margin-top' : '-300px' , 'margin-left' : '0px', 'left' : '10px'}, 500, 'swing');
$("#nav ul li#b").animate({'margin-top' : '-200px' , 'margin-left' : '0px', 'left' : '10px'} , 500, 'swing');
$("#nav ul li#c").animate({'margin-top' : '-100px' , 'margin-left' : '0px', 'left' : '10px'} , 500, 'swing');
$("#nav ul li#d").animate({'left' : '10px'} , 500, 'swing');
$("#nav").animate({'margin-top' : '100px'} , 500, 'swing');
});
I'm sure this has to be a known error with an easy fix but I can't seem to find a fix yet :(
From what I can make out, the problem seems to be that webkit can't animate the left property from what is initially an 'auto' value to a pixel offset. What it does is set the property to 0 and then animate from there.
The one solution I can suggest, is to calculate the current pixel offset of each li element immediately before starting the animation, and set their left properties to those offsets.
Something like this:
$("#nav ul li").each(function(){
$(this).css('left', $(this).position().left + 'px');
});
jsFiddle example
This is based on your second example link.
Related
I've worked with this many times and have had no problem. Animating the height and/or width of a DIV either by width/height: 'toggle' or replacing 'toggle' with specified width/height.
setTimeout( function(){
$('.input-group .Advanced').animate({
height: 'toggle'
}, {
duration: 500,
});
} , 500);
height: 'toggle' - Demo on JSFiddle
height: '400px' - Demo on JSFiddle
The code snippet works perfectly fine however I need this to be set to a specific height and replacing my 'toggle' to a fixed height such as '400px' does absolutely nothing...
$('.form-control' ).click(function(e) {
$(this).addClass('InputFreezeFocus');
$(this).animate({
width: '400px'
}, {
direction: 'left',
duration: 500,
});
setTimeout( function(){
$('.input-group .Advanced').animate({
height: '400px',
opacity: 'toggle'
}, {
duration: 500,
});
} , 500);
});
The .animate() method does not make hidden elements visible as part of the effect so you have to toggle the opacity.
Link to fiddle
Your given height is not working because you have set a display:none to your .Advanced class. When you use jquery inbuilt toggle string it will take care of that and make your hidden element in view.But, when you define your own height you also have to display that element in view otherwise animation will work but not display. You can refer Jquery animate() reference .It's written there
Note: Unlike shorthand animation methods such as .slideDown() and .fadeIn(), the .animate() method does not make hidden elements visible as part of the effect. For example, given $( "someElement" ).hide().animate({height: "20px"}, 500), the animation will run, but the element will remain hidden.
You can do this to animate your class
setTimeout( function(){
$('.input-group .Advanced').animate({
height: '500px',
opacity:'show'
}, {
duration: 500
});
} , 500);
This will get your hidden element in view.Demo of your code
I'm attempting to get certain items to animate from one location to a new one on a click of the appropriate button. Even though I used fixed positions and have javascript to set the location before the animation, things still go off the page before to the end point.
Firefox and Webkit browsers have had different errors on and off and I can't find a solid solution to this, could anyone help me out with this?
$(function(){
$("#nav li").click(function() {
$("#nav").css({
'left' : $(this).position().left + 'px',
'top' : $(this).position().top + 'px'
})
.animate({
'margin-top' : '-175px',
'margin-left' : '0px',
'left' : '10px',
'top' : '50%',
'height' : '370px',
'width' : '70px'
}, 500, 'swing');
$("#name").css({
'top': $(this).position().top + 'px'
})
.animate({
'top' : '100px'
} , 500, 'swing');
});
$("#buttona").click(function() {
$("#a").animate({
'opacity' : '1' ,
'top' : '50%',
'margin-top' : '-200px'
}, 500, 'swing');
});
});
http://coreytegeler.com/jg/
Your use of #nav li#a and .set#a worries me. IDs must be unique, so it never makes sense to use more than just an ID in a selector. This is almost certainly the cause of your animation issues.
I want to make the effect like, after click the box, the box disappeared after expanding its both top and bottom, I did some work, but expends only on bottom. and the effects not quite good, I'd like to make the box bigger. http://jsfiddle.net/wY8Wb/ if someone could help me out? thanks
Check this demo: http://jsfiddle.net/wY8Wb/3/
Code:
$('#videoimg').click(function(){
$(this).fadeOut('slow');
$('#color')
.css({
top: ($(this).offset().top + $(this).height()/2) + 'px',
height: 0
})
.animate({
// the hard-coded "9" you see below is half of the
// difference between the final heights of the 2 divs == (300-282)/2.
// Given here so as to have the color div expand out
// equally at top and bottom
top: ($(this).offset().top - 9) + 'px',
height: '300px'
}, 'slow');
})
JSFiddle : http://jsfiddle.net/wY8Wb/17/
$(document).ready(function(){
$('#videoimg').click(function(){
$(this).fadeOut('slow');
$('#color').animate({height: '300px', top: '0px'}, 'slow');
})
});
changed css also
i am trying to slide a div content to top right side. i am trying but i can't get it, here is my html code
<html><body>
<button id="animatenow">animate now!</button>
<div id="container">
<div>hi</div>
<div>there</div>
</body>
</html>
here is script
$(document).ready(function(){
$('#animatenow').click(function(){ $('#container').animate({width: "-=300px",marginTop: "-=1250px", height: "+=50px"},1500);}); });`
my css is
#container{width:600px;color:#fff;background:#f00;height:400px}
my jsfiddle code
Well, a somewhat overly-complex means to do this:
$('#animatenow').click(function(){
var that = $('#container');
var h = that.height();
var w = that.width();
$('#container')
.wrap('<div id="placeholder"></div>')
.parent()
.css({
'width' : w,
'height' : h
})
.find('#container')
.css({
'position' : 'absolute',
'top' : 0,
'left' : 0,
'right' : 0,
'bottom' : 0
})
.animate(
{
'top' : '-' + h,
'left' : w,
'right' : '-' + w,
'bottom' : h
},2000,
function(){
$(this).parent().remove();
});
});
JS Fiddle.
The above assumes you want to avoid the sliding element's text wrapping and re-flowing as it slides out of view. If you're okay with re-flowing text, then it's a lot easier and avoids adding a new wrapping element and the (hideous) call to animate().
References:
animate().
click().
css().
find().
height().
parent().
remove().
width().
wrap().
you forgot position:absolute on the #container css
$(document).ready(function(){
$('#animatenow').click(function(){
$('#container').animate({
marginLeft: "700px",
marginTop: "-=1250px",
}
,1500);
});
});
Are you trying to get an effect like this? I am unsure of what you mean, hope this helps a little.
I have updated your code here .Basicall you need to animate the left ,top and width properties after seting the position:absolute property to #container
$(document).ready(function() {
$('#animatenow').click(function() {
$('#container').animate({
right: '0',
top: '0',
width: '120',
height: '120'
}, 'slow');
});
});
If you want to move the div out of visible area or hide it make the width and height 0px
Okay, so far this works in Chrome, but not Firefox. It's pretty simple so I'm not sure what's going on. If I change .animate to .css it works perfectly (minus the animation).
$("#superfish-1 > li").hover(function() {
$(this).animate({"border-left" : "3px solid #A5D572", "margin-left" : "-2px"}, "fast");
}, function() {
$(this).animate({"border-left" : "1px solid #EFEFEF", "margin-left" : "0px"}, "fast");
});
Thanks
The second parametre to the hover() function should be the animate() function as well, not css(). If css() is meant to be there, remove its second parametre ("fast").
you can not animate color and border type by default with jquery. unless you use some plugin i would recommend that you only animate the border-width.
as mentioned by #mingos you should remove the fast parameter in the css function to.
http://jsfiddle.net/meo/Gsqre/1/
tested in Chrome. Color does not animate.
This version animates the with and the margin and it works in all browsers:
$("#superfish-1 > li").hover(function() {
$(this).animate({"border-left-width" : "3px", "margin-left" : "-2px"}, "fast");
}, function() {
$(this).css({"border-left-width" : "1px", "margin-left" : 0});
});
You can change the color separately in the css if you wish, even animate it. Or do the whole animation in CSS: http://jsfiddle.net/meo/Gsqre/3/
Okay this is how you do it. You must css the border-color first and then animate the width:
Make sure you use the borderWidth or borderLeftWidth property (without quotes) otherwise it does't work for some reason.
$("#superfish-1 > li").hover(function() {
$(this).css({"border-left" : "1px solid #A5D572"}).animate({borderLeftWidth : "3px", "margin-left" : "-2px"}, "fast");
}, function() {
$(this).animate({borderLeftWidth : "1px", "margin-left" : "0px"}, "fast").css({"border-left" : "1px solid #EFEFEF"});
});