What would be a better way of writing this:
setTimeout(function() {
$('#clock').animate({
'marginTop': '-20px'
}, 'slow', $.bez(bezierEasing));
}, 100);
setTimeout(function() {
$('#submit').animate({
'top': '-5px'
}, 500, $.bez(bezierEasing));
}, 200);
setTimeout(function() {
$('#details').animate({
'top': '-200px'
}, 500, $.bez(bezierEasing));
}, 300);
setTimeout(function() {
$('#details').animate({
'top': '19px'
}, 100, $.bez(bezierEasing));
}, 600);
Create a function:
// adjust your function accordingly...
function animateIt(selector, speed, top) {
setTimeout(function() {
$(selector).animate({
'top': top
}, speed, $.bez(bezierEasing));
}, 600);
}
Instead of using some weird timeOut chain why you don't use TimelineMax from greensock.com.
It's far more advanced and way easier to use.
Just throwing out my version...
function animateEl(selector, css, speed, timer) {
var tmp = parseInt(speed, 10);
if (!isNaN(tmp)) {
speed = tmp;
}
return setTimeout(function () {
$(selector).animate(css, speed, $.bez(bezierEasing)
}, timer);
}
animateEl('#clock', {'marginTop': '-20px' }, 'slow', 100);
animateEl('#submit', { 'top': '-5px' }, 500, , 200);
animateEl('#details', { 'top': '-200px' }, 500, 300);
animateEl('#details', { 'top': '19px' }, 100, 600);
Related
I have wrote script to display a message at the top of the screen (hide automatically) with the following code:
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function() {
$('#dialog2').animate({
marginTop: "40",
}, 700);
},1000);
setTimeout(function() {
$('#dialog2').animate({
marginTop: "-80px",
}, 1500);
},10000);
});
</script>
It works well.
Now I'm trying to adapt marginTop with different size of screens with
if/else like this pseudo code:
if (window.matchMedia("(min-width: 240px)").matches) {
marginTop: "20",
} else {
marginTop: "40", // pseudocode
}
I have tried
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function() {
if (window.matchMedia("(min-width: 400px)").matches) {
$('#dialog2').animate({
marginTop: "40",
}, 700);
},1000);
} else {
$('#dialog2').animate({
marginTop: "40",
}, 700);
},1000);
setTimeout(function() {
$('#dialog2').animate({
marginTop: "-80px",
}, 1500);
},10000);
});
</script>
But it seems not working. I'm new in javascript, and I think the setTimeout is too hard to integer for me.
Any solution ?
You have errors in your code "SyntaxError: Unexpected token ,".
To fix use this
setTimeout(function() {
if (window.matchMedia("(min-width: 400px)").matches) {
$('#dialog2').animate({
marginTop: "40",
}, 700);
} else {
$('#dialog2').animate({
marginTop: "40",
}, 700);
setTimeout(function() {
$('#dialog2').animate({
marginTop: "-80px",
}, 1500);
},2000);
}
},10000);
Hope this helps.
Ok, with Firebug I have found my error.
This following code works well:
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function() {
if (window.matchMedia("(min-width: 400px)").matches) {
$('#dialog2').animate({
marginTop: "40",
}, 700);
} else {
$('#dialog2').animate({
marginTop: "20",
}, 700);
}},1000);
setTimeout(function() {
$('#dialog2').animate({
marginTop: "-80px",
}, 1500);
},10000);
});
</script>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
if (window.matchMedia("(min-width: 400px)").matches) {
console.log('12')
$('#dialog2').animate({
marginTop: "20"
}, 700);
} else {
console.log('11')
$('#dialog2').animate({
marginTop: "40",
}, 700);
}
}, 1000);
setTimeout(function() {
$('#dialog2').animate({
marginTop: "-80px"
}, 1500);
}, 10000);
});
I dont got your idea. maybe this is what you want?
Here is my fiddle link.
jQuery('input').focusin(function(){
window.setTimeout(function() {
jQuery('input').addClass('animatedBottomBorder');
}, 150);
window.setTimeout(function() {
jQuery('input').addClass('animatedLeftBorder');
}, 300);
window.setTimeout(function() {
jQuery('input').addClass('animatedTopBorder');
}, 450);
window.setTimeout(function() {
jQuery('input').addClass('animatedRightBorder');
}, 600);
});
jQuery('input').focusout(function(){
jQuery('.searchTextField').removeClass('animatedBottomBorder');
jQuery('.searchTextField').removeClass('animatedLeftBorder');
jQuery('.searchTextField').removeClass('animatedTopBorder');
jQuery('.searchTextField').removeClass('animatedRightBorder');
});
In focusin event, borders start to fadein and in focusout event borders disappear.
But the line should look like building up while moving and quite fast. Now it loads in a fade in motion but I want it to be in a moving motion.
Please try the below code:
jQuery('input').focusin(function(){
window.setTimeout(function() {
jQuery('input').css({"border-right-color": 'blue'}).animate({
borderWidth: 4
}, 500, 'swing');
}, 150);
window.setTimeout(function() {
jQuery('input').css({"border-bottom-color": 'green'}).animate({
borderWidth: 4
}, 500, 'swing');
}, 300);
window.setTimeout(function() {
jQuery('input').css({"border-left-color": 'black'}).animate({
borderWidth: 4
}, 500, 'swing');
}, 450);
window.setTimeout(function() {
jQuery('input').css({"border-top-color": 'red'}).animate({
borderWidth: 4
}, 500, 'swing');
}, 600);
});
Hope this will help!!
So I'm using this lightbox and I need to put Next and Previous buttons, but I don't know how. If someone can help me...
$(document).ready(function () {
$('.lightbox').click(function () {
// Get all following .box and .background until next .lightbox is met.
// So we can get the related contents.
var $targets = $(this).nextUntil('.lightbox', '.box, .background');
$targets.animate({
'opacity': '.50'
}, 500, 'linear')
$targets.filter('.box').animate({
'opacity': '1.00'
}, 500, 'linear');
$targets.css('display', 'block');
});
$('.close').click(function () {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function () {
$('.background, .box').css('display', 'none');
});;
});
$('.background').click(function () {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function () {
$('.background, .box').css('display', 'none');
});;
});
});
Here > https://jsfiddle.net/cuummyhx/
I have a series of jQuery functions to execute in a block. When they ALL are done, I need another function to be called. It seems a callback is the best way to do this. Here is my code.
function flipPage (x, callback) {
$("#view-1").animate({
width: x,
}, 500);
$("#view-2").animate({
width: browserWidth - x,
}, 500);
$("#iframe-2").animate({
left: -x,
}, 500);
$("#sweeper").animate({
left: x,
}, 500);
callback(function() {
alert("I'm Done.");
//do the next thing
}) ;
}
You could do something like this:
function flipPage (x, callback) {
var animationHelper = {
actionCounter: 0,
actionCount: 4,
callbackHandler: function() {
this.actionCounter++;
if(this.actionCounter == this.actionCount)
this.callbackAllFinished();
},
callbackAllFinished: null
};
$("#view-1").animate({
width: x }, 500, animationHelper.callbackHandler);
$("#view-2").animate({
width: browserWidth - x }, 500, animationHelper.callbackHandler);
$("#iframe-2").animate({
left: -x }, 500, animationHelper.callbackHandler);
$("#sweeper").animate({
left: x }, 500, animationHelper.callbackHandler);
animationHelper.callbackAllFinished = function() {
alert("I'm Done.");
//do the next thing
};
}
Essentially the same as sjkm's, but simplified.
function flipPage (x, callback) {
var counter = 0;
$("#view-1").animate({
width: x,
}, 500, finished);
$("#view-2").animate({
width: browserWidth - x,
}, 500, finished);
$("#iframe-2").animate({
left: -x,
}, 500, finished);
$("#sweeper").animate({
left: x,
}, 500, finished);
function finished() {
counter++;
if (counter >= 4) {
alert("I'm Done.");
//do the next thing if callback exists
callback && callback.call();
}
};
}
jsfiddle
I am using some JavaScript and jQuery (with the easing plugin) to create a virtual tour; really just a long image that can pan left and right. I have found this which is perfect for the cause: http://jsfiddle.net/MvRdD/1/. Is there a way to add easing to the animation?
http://jsfiddle.net/ARTsinn/MvRdD/890/
$(document).ready(function() {
$.getScript("https://raw.github.com/danro/easing-js/master/easing.min.js");
var animateTime = 10,
offsetStep = 5,
scrollWrapper = $('#wrap');
//event handling for buttons "left", "right"
var aktiv;
$('.bttL, .bttR').mousedown(function(e) {
if (e.target.className === 'bttR') {
aktiv = window.setInterval(function() {
scrollWrapper.animate({
scrollLeft: '+=' + 20
}, {
duration: 600,
queue: false,
easing: 'easeOutCirc'
});
}, 10);
} else if (e.target.className === 'bttL') {
aktiv = window.setInterval(function() {
scrollWrapper.animate({
scrollLeft: '-=' + 20
}, {
duration: 1200,
queue: false,
easing: 'easeOutCirc'
});
}, 10);
}
}).mouseup(function() {
window.clearInterval(aktiv);
});
scrollWrapper.mousedown(function(event) {
$(this).data('down', true).data('x', event.clientX).data('scrollLeft', this.scrollLeft);
return false;
}).mouseup(function(event) {
$(this).data('down', false);
}).mousemove(function(event) {
if ($(this).data('down')) {
$(this).stop(false, true).animate({
scrollLeft: $(this).data('scrollLeft') + ($(this).data('x') - event.clientX) * 2
}, {
duration: 600,
queue: false,
easing: 'easeOutCirc'
});
}
}).mousewheel(function(event, delta) {
$(this).stop(false, true).animate({
scrollLeft: '-=' + delta * 60
}, {
duration: 400,
queue: false,
easing: 'easeOutCirc'
});
event.preventDefault();
}).css({
'overflow': 'hidden',
'cursor': '-moz-grab'
});
});