jQuery animation timing - javascript

I have here a function and what I want to happen is to display the div first before it smoothly changes it's width.. Unfortunately what happen is that the width already changes once it appears
CSS:
#frame12{
opacity:0;
filter:alpha(opacity=0);
width:100;
}
jQuery:
function animatestamp(){
jQuery("div#frame12").css({'opacity':'1','filter':'alpha(opacity=100)'}).animate({
width:'451px'
},animatestamp);
}

Use animate on div's opacity first and then on its complete callback animate the width.
function animatestamp() {
jQuery("#frame12").animate({ //animate the opacity first
'opacity': 1,
'filter': 'alpha(opacity=100)'
}, 2000, function () { //Once it is completely visible start animating the width
$(this).animate({
'width': '451px',
}, 1000);
});
}
animatestamp();
Fiddle
For recursive you can try this:
var $frame = jQuery("#frame12");
function getWidthConfig(elem) { //get the width animate object based on current elem width
return {
'width': elem.width() > 450 ? '100px': '451px'
}
}
function getOpacityConfig(elem) {//get the opacity animate object based on current elem opacity
var opac = +elem.css('opacity');
return {
'opacity': !opac ? 1 : 0,
'filter': !opac ? 'alpha(opacity=100)' : 'alpha(opacity=0)'
}
}
function animatestamp() {
$frame.animate(getOpacityConfig($frame), 2000, function () {
$frame.animate(getWidthConfig($frame), 1000, animatestampReverse);
});
}
function animatestampReverse() {
$frame.delay(2000).animate(getWidthConfig($frame), 1000, function () {
$frame.animate(getOpacityConfig($frame), 2000, animatestamp)
});
}
animatestamp();
Fiddle

Animate opacity & filter first, then animate the width as PSL well said but also in your CSS, change "width:100;" to "width:100px;" (Add measurement unit "px") or otherwise the div's initial width would be screen width (add a border to your css to see the difference visually) and to make your js simpler and more readable, use chaining in your Javascript:
CSS:
#frame12{
opacity:0;
filter:alpha(opacity=0);
width:100px; /*Add px to avoid max screen witdth and CSS Flash */
border: solid 1px; /* to see the real div width */
}
Javascript:
function animatestamp() {
$("div#frame12")
.animate({ 'opacity': 1, 'filter': 'alpha(opacity=100)' }, 2000)
.animate({ width: '451px'}, 1000);
}

Need more code to be sure, but I'm guessing its because you have not set an explicit width on that container before applying an animation to the width property. Could try this:
function animatestamp(){
$("#frame12").css({
'opacity':'1',
'filter':'alpha(opacity=100)',
'width': $(this).width()
}).animate({
width:'451px'
}, animatestamp);
}
Or just set it in the css...
#frame12 { width: 100px; }
... and remove the 'width' from the css() above.

Related

JQuery .animate(); not working with fixed height

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

Jquery : animate image from right corner once scrolled to specific position

i've to animate an image form right side. when page scrolls down its invisible and when page reaches there image floats from right now i can detect the position of the scroll like this
jQuery(document).ready(function($){
var target = $(".myimages").offset().top;
var interval = setInterval(function() {
if ($(window).scrollTop() >= target) {
alert("image found ");
//here float the image
}
}, 250);
});
now i want to do is float the image from right corner to its width. i only know its can use animation like this
$('.myimages').animate({css properties here})
but don't know how to use it so please help
Here is jQuery API for animate function: http://api.jquery.com/animate/
and some example how to use it:
$( ".myimages" ).animate({
right: "100px",
width: "200px"
}, 1000);
Post your working code on jsfiddle, so we can help you better.
I think it is better to use.
by default use css3 transform to place it to the right
$(document).ready(function(){
initAnimation();
});
function initAnimation() {
var win = $(window);
var targetImage = $('.myimages');
var animate = function() {
if ($(window).scrollTop() >= targetImage.offset().top) {
targetImage.addClass('active');
}
else {
targetImage.removeClass('active');
}
};
win.on('load scroll', animate);
}
.myimages {
transform: translate(100%, 0);
transition: transform 0.5s ease-in-out;
}
.myimages.active {
transform: translate(0, 0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

overflow-y: scroll causing issues with JQuery

When I add overflow-y:scroll to the .nav styling the button to open the navigation requires 2 clicks. Change this to overflow: none and it only requires 1 click as intended when using the following jquery:
$(function(){
var nav = $('.nav'),
navBut = $('.navBut');
navBut.click(function(){
if(nav.width() === 0){
nav.stop().animate({ width: '15%', opacity: '1.0' }, 300);
} else {
nav.stop().animate({ width: '0', opacity: '0.0' }, 300);
}
});
Can anybody see why this would be the case or how I can solve this?
http://jsfiddle.net/9ubxyw0t/2/
Rather than checking if the width of .nav is equal to 0, you need to check to see if it is less than or equal to 0.
Your original issue only seemed to effect certain browsers. It seems like some browsers would give the element a negative width when the overflow property was set to scroll. I guess this is just a cross-browser rendering inconsistency.
Updated Example
var nav = $('.nav'),
navBut = $('.navBut');
navBut.on('click', function () {
if (nav.width() <= 0) {
nav.stop().animate({
width: '15%',
opacity: '1.0'
}, 300);
} else {
nav.stop().animate({
width: '0',
opacity: '0.0'
}, 300);
}
});

Slide in images - JQuery

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.

JS change height and return to original CSS height

Hoping to get some help on some javascript i'm getting stuck with.
Q1: JS RETURN TO IMAGE HEIGHT AND MARGIN
My layout is horizontal scroll of smaller images positioned in a grid, using different height percentages and margins to position.
When you click on any of the images they all expand to height:100% and margin:0 which clears all previous styles putting it into a simple large image layout.
My question is how do I add a function that when clicking on .image-container the height and margins returns to how it was originally set in the css
JS FIDDLE DEMO (click any center image)
// GALLERY 100% height
$('.image-container').click(function(){
$('.image-container img').animate({'height': '100%'},900)
.animate({'margin': '0'},900);
});
// ? REMOVE HEIGHT ?
$('.image-container').click(function(){
$('.image-container img').animate({'height': '?'},900)
.animate({'margin': '?'},900);
});
EDIT UPDATED QUESTION: Q2 HOW TO MAKE PAGE SIZE GROW WITH LARGER IMAGES
Right now my .image-container is set to a large width but with responsive images it's hard to find the correct width, is there a way to find this width and to make it grow along with the click grow of images (displayed above)
.image-container {
display:block;
width:3600px;
height: 75%;
float:left;
position:absolute;
top: 13%;
left: 120px;
z-index: -1;
}
Thanks for any help!
You need to store the original height in a variable.
Check out the updated fiddle
var originalheight;
// GALLERY 100% height
$('.image-container').click(function(){
originalheight = $('.image-container img').height();
$('.image-container img').animate({'height': '100%'},900)
.animate({'margin': '0'},900);
});
//REMOVE HEIGHT ?
$('.image-container').click(function(){
$('.image-container img').animate({'height': originalheight},900)
.animate({'margin': '0'},900);
});
EDIT:
Sorry about the goof up in previous solution. I didn't notice I was using click twice unnecessarily.
Here's the updated solution with the updated fiddle.
var originalheight;
$('.image-container').click(function () {
if (!originalheight) originalheight = $('.image-container img').height();
if ($('.image-container img').css('height') == originalheight + "px") { // GALLERY 100% height
$('.image-container img').animate({
'height': '100%'
}, 900).animate({
'margin': '0'
}, 900);
} else { //REMOVE HEIGHT ?
$('.image-container img').animate({
'height': originalheight
}, 900).animate({
'margin': '0'
}, 900);
}
});
This is my idea, hope it'll work:
// Before animation
var heights = new Array();
var margins = new Array();
$('.image-container img').each(function(){
heights.push($(this).css('height'));
});
$('.image-container img').each(function(){
margins.push($(this).css('margin'));
});
//
$('.image-container').click(function(){
$('.image-container img').animate({'height': '100%'},900)
.animate({'margin': '0'},900);
});
// ? REMOVE HEIGHT ?
$('.image-container').click(function(){
$('.image-container img').animate({'height': heights[$(this).index()]},900)
.animate({'margin': margins[$(this).index()]},900);
});
First of all, I suggest you to use the focusout and blur event to undo changes, because the way you implement your 'click' event, the second part only will be considered (you erase the first click implementation doing so). the best thing, is to enlarge the image when clicked, and reinit it's size when you click away.
Try this :
// GALLERY 100% height
$('.image-container')
.bind('click', function(){
$('.image-container img').animate({height: '100%'},900)
.animate({margin: 0},900);
})
.bind('focusout blur', function(){
$('.image-container img').animate({height: ''},900)
.animate({margin: ''},900);
});
Or better, use classes in which you define the behaiviors on clicking, and on clicking again, for exemple :
<style>
.clickimage{ height : 100%; margin :0;}
.yourOriginalValues {height : original; margin : original;}
</style>
$('.yourOriginalValues').click(function(){
$(this).switchClass( "yourOriginalValues", "clickimage", 900 );
});
$('.clickimage).click(function(){
$(this).switchClass( "clickimage", "yourOriginalValues", 900 );
});
ps. the switchClass method, is a jQuery UI functionality.

Categories