Second Javascript function throws everything off - javascript

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);

Related

Why aren't jQuery functions being called sequentially?

I have a function that, when the Start button is pressed, a cycle is called for 10 iterations, where it generates a number from 1 to 7, which is substituted in the switch, where functions should be called in turn on the object. First change css, then call animate and then change css again, but instead they change at the same time without waiting for the end of the previous function. Why is this happening? And how to fix it?
The function
$('input[Value="Start"]').click(function () {
$(this).css("visibility", "hidden");
for (let i = 0; i < 10; i++) {
note = Math.floor(Math.random() * 7) + 1;
console.log(note);
switch (note) {
case 1:
$('.SightReading_content_show_imeage_note_C').css("visibility", "visible").animate({ 'left': '20%' }, 3000).css({ "visibility": "hidden", "left":"80%"});
break;
case 2:
$('.SightReading_content_show_imeage_note_D').css("visibility", "visible").animate({ 'left': '20%' }, 3000).css({ "visibility": "hidden", "left": "80%" });
break;
case 3:
$('.SightReading_content_show_imeage_note_E').css("visibility", "visible").animate({ 'left': '20%' }, 3000).css({ "visibility": "hidden", "left": "80%" });
break;
case 4:
$('.SightReading_content_show_imeage_note_F').css("visibility", "visible").animate({ 'left': '20%' }, 3000).css({ "visibility": "hidden", "left": "80%" });
break;
case 5:
$('.SightReading_content_show_imeage_note_G').css("visibility", "visible").animate({ 'left': '20%' }, 3000).css({ "visibility": "hidden", "left": "80%" });
break;
case 6:
$('.SightReading_content_show_imeage_note_A').css("visibility", "visible").animate({ 'left': '20%' }, 3000).css({ "visibility": "hidden", "left": "80%" });
break;
case 7:
$('.SightReading_content_show_imeage_note_B').css("visibility", "visible").animate({ 'left': '20%' }, 3000).css({ "visibility": "hidden", "left": "80%" });
break;
}
}
$(this).css("visibility", "visible");
});
Maybe you want each animation to occur 1s after the previous?
case 1:
setTimeout(
function(){
$('.SightReading_content_show_imeage_note_C').css("visibility", "visible").animate({ 'left': '20%' }, 3000).css({ "visibility": "hidden", "left":"80%"})
},
i * 1000
);
break;
case 2:
...

Query Animation Function Call

I have a website with multiple boxes and I want to create a function for the animations so I don’t have to add them to each hover box as some have different animations included.
For some reason I cannot call the animation in the box, if I copy the function code and place in the box it works fine but can get it working calling it from the function.
function aniIn() {
$(".br-t", this).stop().animate({ "width": "100%" }, 500, "easeOutQuint" ),
}
function aniOut() {
$(".br-t", this).stop().animate({ "width": "0"}, 900, "easeOutQuint" ),
}
$("a#box01").hover(function() {
$("#background").fadeIn(500);
aniIn();
}, function() {
$("#background").stop().fadeOut(900);
aniOut()
});
HTML:
Any help would be great.
TJ.
Try below code:
function aniIn(current) {
$(".br-t", current).stop().animate({ "width": "100%" }, 500, "easeOutQuint" ),
}
function aniOut(current) {
$(".br-t", current).stop().animate({ "width": "0"}, 900, "easeOutQuint" ),
}
$("a#box01").hover(function() {
$("#background").fadeIn(500);
aniIn(this);
}, function() {
$("#background").stop().fadeOut(900);
aniOut(this);
});

JavaScript not working on dynamic content

I have a page where in a div HTMl is loaded from another page. In the parent page, I have javascript which has elements that apply to the dynamic content (such as mouseover animate, etc.). I have been trying to make it work for quite a few hours now but it just won't work. No JS errors in the Chrome developer tools. Can anyone help?
For example on the parent page's javascript I have:
jQuery("ul#nav li.page a").on('mouseover', '.item', function () {
jQuery(this).stop(true, true).animate({
backgroundPosition: "(0 0)"
}, 500);
jQuery(this).animate({
backgroundPosition: "(0 -35px)"
}, 750);
}, function () {
jQuery(this).animate({
backgroundPosition: "(0 -120px)"
}, 750)
});
and the 'child' page where HTML is loaded from
<li class="page">Home</li>
<li class="page">About Us</li>
<li class="page">Store</li>
<li class="page">News</li>
<li class="page">Contact</li>
Your help would be greatly appreciated!
try using 'delegate' method instead of 'on'.
jQuery(body).delegate('ul#nav li.page a', 'mouseover', function () {
jQuery(this).stop(true, true).animate({
backgroundPosition: "(0 0)"
}, 500);
jQuery(this).animate({
backgroundPosition: "(0 -35px)"
}, 750);
}, function () {
jQuery(this).animate({
backgroundPosition: "(0 -120px)"
}, 750)
});
if you wish to attach .on action to a dynamic element, you attach it to the $(document) instead.
and when the new elements are loaded the action is already there.
jQuery(document).on('mouseover', 'ul#nav li.page a', function () {
jQuery(this).stop(true, true).animate({
backgroundPosition: "(0 0)"
}, 500);
jQuery(this).animate({
backgroundPosition: "(0 -35px)"
}, 750);
}, function () {
jQuery(this).animate({
backgroundPosition: "(0 -120px)"
}, 750)
});
try using:
jQuery("ul#nav li.page a").on('mouseover', '.item', function () {
jQuery(this).stop().animate({
backgroundPosition: "(0 -35px)"
}, 750);
}, function () {
jQuery(this).stop().animate({
backgroundPosition: "(0 -120px)"
}, 750)
});

Why I can not click on my function to show and hide?

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

optimize JavaScript setTimeout

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);

Categories