Why aren't jQuery functions being called sequentially? - javascript

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:
...

Related

Jquery Error offset(...) is undefined

$('#add_to_cart_btn').unbind().on('click', function() {
//var cart = $('.cart_r');
var imgtodrag = $('#bzoom').find('img').eq(0);
if (imgtodrag) {
var imgclone = imgtodrag.clone().offset({
top: imgtodrag.offset().top, left: imgtodrag.offset().left
}).css({
'opacity': '0.5', 'position': 'absolute', 'height': '150px', 'width': '150px', 'z-index': '100'
}).appendTo($('body')).animate({
'top': $('.cart_r').top + 10, 'left': $('.cart_r').offset().left + 10, 'width': 75, 'height': 75
}, 1000, 'easeInOutExpo');
setTimeout(function () {
//cart.effect('shake', { times: 2 }, 200);
}, 1500);
imgclone.animate({
'width': 0, 'height': 0
}, function () {
$(this).detach();
});
$("html, body").animate({ scrollTop: 10 }, 1000);
}
return false;
});
show this error TypeError: $(...).offset(...) is undefined all ready add jquery.min.js but not working on any browser . any one can help me . Thanks in Advance

stop jquery until effect finished

Below is my code:
$(".menu").click(function( event ) {
event.preventDefault();
if ( !$( this ).hasClass("isDown") ) {
$(".menu-container").css("display", "block");
$(".menu-container")
.animate({ "height": "5%" }, 200 )
.animate({ "height": "2%" }, 200 )
.animate({ "height": "8%" }, 200 )
.animate({ "height": "100%" }, 1000 );
} else {
$(".menu-container")
.animate({ "height": "50%" }, 600 )
.animate({ "height": "65%" }, 200 )
.animate({ "height": "40%" }, 200 )
.animate({ "height": "0%" }, 400, function() {
$( this ).css("display", "none");
});
}
// use this class as indecator if menu open or not
$( this ).toggleClass("isDown");
return false;
});
When the (menu button) is clicked several times, the effect likewise occurs repeatedly.
How can I prevent that?
Add animation before adding the following code:
if(!$(".menu-container").is(":animated"))

Second Javascript function throws everything off

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

Loop through current widget instances

I am currently in the process of writing my own hinter widget using UI widget factory. For my turnOn and turnOff methods, I want either all my hints to be turned on or off OR if i pass an array of hint id's to this methods, they will turn on or off specifically only those with the ids.
Widget looks like this at the moment:
$.widget("ui.hint", {
options: {
id: '1',
text: 'This is a hint',
position: 'top',
offset: '0%',
hide: { effect: "explode", duration: 1000 }
},
_create: function() {
var o = this.options,
el = this.element,
shell = $('<div></div>').addClass('ui-hint ui-hint- '+o.position).text(o.text).css({
position: 'absolute',
minHeight: 100,
minWidth: 100,
background: 'rgb(250, 255, 189)',
zIndex: 9999
});
el.addClass('ui-hint-target');
this._trigger('beforeShow', null, shell) //added event before placing into dom
shell.insertAfter(el);
switch (o.position) {
case 'top':
shell.position({
"my": "center bottom",
"at": "center top",
"of": el,
"offset": o.offset+" -25%",
"collision": 'none none'
});
break;
case 'bottom':
shell.position({
"my": "center top",
"at": "center bottom",
"of": el,
"offset": o.offset+" 25%",
"collision": 'none none'
});
break;
case 'left':
shell.position({
"my": "right center",
"at": "left center",
"of": el,
"offset": "-25% "+o.offset,
"collision": 'none none'
});
break;
case 'right':
shell.position({
"my": "left center",
"at": "right center",
"of": el,
"offset": "25% "+o.offset,
"collision": 'none none'
});
break;
}
},
_setOption: function(key, value) {
if (value !== undefined) {
this.options[key] = value;
this._render();
return this;
}
else {
return this.options[key];
}
},
hide: function() {
this.element.next().hide("fast");
this._trigger('afterHide', null, this.element.next());
},
show: function() {
this._trigger('beforeShow', null, this.element.next());
this.element.next().show("fast");
},
hint: function() {
return this.element.next();
}
});
My question is, how can i organize those methods? I imagine I should loop through each instance of the widget and compare the values with their id's yet i don't know how. Will appreciate any advice, thanks in advance.
I may not be understanding your question fully, but if I was you I'd use a class rather than Id's to select multiple elements. Then you can use jquery's each method you can do something like:
$('.ui-hint').each(function(i, el) {
var $myHint = $(el);
console.log('index: ', i, ' jquery el: ', $myHint);
});

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