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?
Related
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!!
Hey I just have a simple javascript code in which I animate elements to appear on the page when the page loads. Everything is fine with the animating segment. However, when I try to add in a second javascript command for when I hover over the image, nothing else works. I am definitely sure it has to do with how I entered the code. Can someone help fix my code?
var main = function() {
{
$(".menu").animate({
"top": "0px"
}, 400);
};
{
$(".about h2").animate({
"right": "0px"
}, 500);
}; {
$(".about p").animate({
"bottom": "0px"
}, 580);
}; {
$(".resume").animate({
"bottom": "0px"
}, 650);
}; {
$("#image img").animate({
"right": "0px"
}, 600);
};
$("#image img").hover(function() {
$(this).css({
"background-color:"
"rgba(0,0,0,0.5)"
});
});
}
$(document).ready(main);
This syntax is incorrect:
$(this).css({
"background-color:"
"rgba(0,0,0,0.5)"
});
That's just two strings, not separated in any way, and therefore not a valid object. The correct syntax is propertyName : "value", so your code should be
$(this).css({
backgroundColor: "rgba(0,0,0,0.5)"
});
See the docs for more info.
Also, as others have pointed out, you don't need all those {...} blocks. Your code can be simplified to this:
var main = function() {
$(".menu").animate({
"top": "0px"
}, 400);
};
$(".about h2").animate({
"right": "0px"
}, 500);
$(".about p").animate({
"bottom": "0px"
}, 580);
$(".resume").animate({
"bottom": "0px"
}, 650);
$("#image img").animate({
"right": "0px"
}, 600);
$("#image img").hover(function() {
$(this).css({
backgroundColor: "rgba(0,0,0,0.5)"
});
});
$(document).ready(main);
I'm trying to create a vertical menu which includes some animation.
I would like the user to hover over part of the the element which triggers the element to expand in width and show some text.
I have had a go at it for the past couple of days but feel i am now just making things worse!
Any help or advice on this would be much appreciated.
here is my fiddle: http://jsfiddle.net/danieljoseph/NZ2QL/3/
Here is the JQuery:
$("nav li").hover(function () {
$("nav li").css('width', 'auto');
});
$("#about-btn").mouseover(function () {
$("#about-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#about-btn").mouseout(function () {
$("#about-btn .tab").animate({
width: "0"
}, 1000);
});
$("#services-btn").mouseover(function () {
$("#services-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#services-btn").mouseout(function () {
$("#services-btn .tab").animate({
width: "0"
}, 1000);
});
$("#work-btn").mouseover(function () {
$("#work-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#work-btn").mouseout(function () {
$("#work-btn .tab").animate({
width: "0"
}, 1000);
});
$("#contact-btn").mouseover(function () {
$("#contact-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#contact-btn").mouseout(function () {
$("#contact-btn .tab").animate({
width: "0"
}, 1000);
});
I'm an amateur when it comes to JQuery so any tips and explanations would be great if possible.
Thanks.
Demo Fiddle
jQuery Code
$("nav li").hover(function () {
console.log($(this).children().children('.tab'));
$(".tab", this).stop().animate({
width: "190px"
}, 1000);
}, function () {
$(".tab", this).stop().animate({
width: "0"
}, 1000);
});
According to me direct children of <ul> must be only <li> so I even changed there position which was wrong in the fiddle you gave...
NOTE: This task could be done using pure css, which would be much lighter
Update Not part of the question:
The same above feature using plain css
I think that's what you really need:
http://jsfiddle.net/NZ2QL/25/
$(".menuItem").mouseover(function () {
var tab = $('.tab[data-id="'+$(this).data('id')+'"]').first();
tab.stop().animate({
width: "190px"
}, 1000);
});
$(".menuItem").mouseout(function () {
var tab = $('.tab[data-id="'+$(this).data('id')+'"]').first();
tab.stop().animate({
width: "0px"
}, 1000);
});
An interesting article that may help:
http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/
Cheers ;)
What i'd recommend is placing the mouseout events on the .tab classes, and you should get what you want. I'll update your fiddle in a second to show you what i mean.
$("nav li").hover(function () {
$("nav li").css('width', 'auto');
});
$("#about-btn").mouseover(function () {
$("#about-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#about-btn .tab").mouseout(function () {
$("#about-btn .tab").animate({
width: "0"
}, 1000);
});
$("#services-btn").mouseover(function () {
$("#services-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#services-btn .tab").mouseout(function () {
$("#services-btn .tab").animate({
width: "0"
}, 1000);
});
$("#work-btn").mouseover(function () {
$("#work-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#work-btn .tab").mouseout(function () {
$("#work-btn .tab").animate({
width: "0"
}, 1000);
});
$("#contact-btn").mouseover(function () {
$("#contact-btn .tab").animate({
width: "190px"
}, 1000);
$("#contact-btn .tab").mouseout(function () {
$("#contact-btn .tab").animate({
width: "0"
}, 1000);
});
http://jsfiddle.net/NZ2QL/11/
This is a little closer, but still needs some fixing.
That should be what you need. It could be cleaned up a little more to condense the code, but the functionality is what you want, I'm pretty sure.
http://jsfiddle.net/NZ2QL/76/
MY FINAL EDIT:
$(".menuItem li").hover(
function() {
$(this).stop().animate({"width":"250px"}, {queue:false, duration:1000});
$(this).children(".tab").animate({"width":"190px"}, {queue: false, duration:1000})},
function(){
$(this).stop().animate({"width":"60px"}, {queue:false, duration:1000});
$(this).children(".tab").animate({"width":"0px"}, {queue: false, duration:1000})}
);
Modified HTML and css are here:
http://jsfiddle.net/NZ2QL/81/
Hey I am having difficulty rewriting a code, but it is not working when clicking to show. How can I fix this issue. The code works opens up 500 then is suppose to work by click. But it does not work. Here is the code:
var timer;
$(".c_left").animate({ marginRight: "30px"}, "slow");
$(".c_right").animate({ marginRight: "215px"}, "slow", function () {
timer = setTimeout(function () {
$(".c_left").animate({ marginRight: "-155px"}, "slow");
$(".c_right").animate({ marginRight: "30px"}, "slow");
}, 500);
});
$(".icon-menu-2").click(function show() {
$(".c_left").show.animate({ width: 200, marginRight: 30, display: 'toggle'}, 'slow');
$(".c_right").show.animate({ marginRight:215, display:'toggle'}, 'slow', function () {
clearTimeout(timer);
});
}, function hide() {
$(".c_left").animate({ marginRight: -155, display: 'toggle'}, 'slow');
$(".c_right").animate({ marginRight:30, display:'toggle'}, 'slow');
});
http://jsfiddle.net/jL5hU/
How can I fix my code?
As bfvareto commented .show() is a function and you cannot call it with just .show
You had strange code here also: .click(function show() {. Not quite sure what you mean there, anyway try my code suggestion...
var timer; var open;
$(".c_left").animate({ marginRight: "30px"}, "slow");
$(".c_right").animate({ marginRight: "215px"}, "slow", function () {
timer = setTimeout(function () {
$(".c_left").animate({ marginRight: "-155px"}, "slow");
$(".c_right").animate({ marginRight: "30px"}, "slow");
open = false;
}, 500);
});
$(".icon-menu-2").click(function() {
if(open){
$(".c_left").animate({ marginRight: "-155px"}, "slow");
$(".c_right").animate({ marginRight: "30px"}, "slow");
} else {
$(".c_left").animate({ marginRight: "30px"}, "slow");
$(".c_right").animate({ marginRight: "215px"}, "slow");
}
open = !open;
});
Demo here
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);