Iam using jquery to animate an image to make a mixed up image that scrolls different parts when clicked.
I thought of doing like this
$("#head").click(function () {
if (headclix < 9) {
$("#head").animate({
left: "-=367px"
}, 500);
headclix++;
} else {
$("#head").animate({
left: "0px"
}, 500);
headclix = 0;
}
});
$("#eyes").click(function () {
if (eyeclix < 9) {
$("#eyes").animate({
left: "-=367px"
}, 500);
eyeclix++;
} else {
$("#eyes").animate({
left: "0px"
}, 500);
eyeclix = 0;
}
});
$("#nose").click(function () {
if (noseclix < 9) {
$("#nose").animate({
left: "-=367px"
}, 500);
noseclix++;
} else {
$("#nose").animate({
left: "0px"
}, 500);
noseclix = 0;
}
});
$("#mouth").click(function () {
if (mouthclix < 9) {
$("#mouth").animate({
left: "-=367px"
}, 500);
mouthclix++;
} else {
$("#mouth").animate({
left: "0px"
}, 500);
mouthclix = 0;
}
});
I hope there is better way of doing it
I'm thinking I can do something with the class and each but not sure how to quite make it work. need to make it a click event and keep track of each image part
$(".face").each(function (i) {
if (i < 9) {
$(".face").parent().animate({
left: "-=367px"
}, 500);
i++;
} else {
$(".face").parent().animate({
left: "0px"
}, 500);
i = 0;
}
});
HTML:
<div id="pic_box">
<div id="head" class="face"><img src="images/headsstrip.jpg"></div>
<div id="eyes" class="face"><img src="images/eyesstrip.jpg"></div>
<div id="nose" class="face"><img src="images/nosesstrip.jpg"></div>
<div id="mouth" class="face"><img src="images/mouthsstrip.jpg"></div>
</div>
image in this link will give you an idea of the functionality
Thank you.
You can create a face object that holds the click counts of each face part and also a function to handle the click event (named clickHandler below). The clickHandler takes in an id and calls the appropriate animate function on the element that has that id.
Check below:
var face = {
"headClicks" : 0,
"eyesClicks" : 0,
"noseClicks" : 0,
"mouthClicks" : 0,
"clickHandler" : function(id) {
if(this[id+"Clicks"] < 9) {
animateLeft367(id);
this[id+"Clicks"]++;
} else {
animateLeft0(id);
this[id+"Clicks"] = 0;
}
}
}
function animateLeft367(id) {
$("#" + id).animate({left: "-=367px"}, 500);
console.log('animated ' + id + ' 367');
}
function animateLeft0(id) {
$("#" + id).animate({left: "0px"}, 500);
console.log('animated ' + id + ' 0');
}
$(".face").click(function() {
face.clickHandler(this.id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pic_box">
<div id="head" class="face"><img src="images/headsstrip.jpg"></div>
<div id="eyes" class="face"><img src="images/eyesstrip.jpg"></div>
<div id="nose" class="face"><img src="images/nosesstrip.jpg"></div>
<div id="mouth" class="face"><img src="images/mouthsstrip.jpg"></div>
</div>
Related
My script should scroll down to an element 2 seconds after the page is loaded. It should work only on mobiles.
window.HTMLElement.prototype.scrollIntoView = function() {};
if (window.innerWidth < 500) {
setTimeout(function() {
let toogleElement = document.getElementsByClassName('eapps-google-maps-bar-toggle');
toogleElement.scrollIntoView({
behavior: 'smooth'
});
}, 2000);
}
#padding { height: 1000px; }
<div id="padding"></div>
<div class="eapps-google-maps-bar-toggle" eapps-link="barToggle">Foo</div>
First, you need to remove window.HTMLElement.prototype.scrollIntoView = function() {}; because you don't need to define your own funciton.
Second, document.getElementsByClassName return HTML collection and you can access the element your want by using toogleElement[0].
Example below
if (window.innerWidth < 2000) {
setTimeout(function() {
let toogleElement = document.getElementsByClassName('eapps-google-maps-bar-toggle');
toogleElement[0].scrollIntoView({
behavior: 'smooth'
});
}, 2000);
}
#padding { height: 1000px; }
<div id="padding"></div>
<div class="eapps-google-maps-bar-toggle" eapps-link="barToggle">Foo</div>
This is the code:
$(document).ready(function() {
var isRandom = false;
$('#one, #two').html(function(i, html) {
var chars = $.trim(html).split("");
return '<span>' + chars.join('</span><span>') + '</span>';
});
$('#one').click(function() {
isRandom = !isRandom;
if (isRandom) {
$('span').each(function() {
$(this).css({
"position": "absolute"
});
$(this).animate({
left: Math.random() * window.outerWidth / 2,
top: Math.random() * window.outerHeight / 2,
});
});
} else {
$('span').each(function() {
$(this).css({
"position": "relative"
});
$(this).animate({
left: 0,
top: 0,
});
});
}
});
});
html,
body {
width: 100%;
height: 100%;
}
div {
font-family: Arial;
font-size: 20px;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one">Click me</div>
<div id="two">Flying letters based on #one</div>
<div>No flying letters</div>
If you click the first div, the letters from #one and #two start moving. That's exactly how it should look like. But then: If you want to get the previous state, you would need have to click a letter from #once. It also should work if you click one of the two other div.
How is it possible to do that? Would be happy if somebody could help me!
You can add click event on #two to do that as below -
$('#two').click(function() {
if (isRandom) {
isRandom = false;
$('span').each(function() {
$(this).css({
"position": "relative"
});
$(this).animate({
left: 0,
top: 0,
});
});
}
});
Final code (I have extracted into functions for better understanding) -
$(document).ready(function() {
var isRandom = false;
$('#one, #two').html(function(i, html) {
var chars = $.trim(html).split("");
return '<span>' + chars.join('</span><span>') + '</span>';
});
$('#one').click(function() {
isRandom = !isRandom;
if (isRandom) {
fly();
} else {
restore();
}
});
$('#two').click(function() {
if (isRandom) {
isRandom = false;
restore();
}
});
function fly() {
$('span').each(function() {
$(this).css({
"position": "absolute"
});
$(this).animate({
left: Math.random() * window.outerWidth / 2,
top: Math.random() * window.outerHeight / 2,
});
});
}
function restore() {
$('span').each(function() {
$(this).css({
"position": "relative"
});
$(this).animate({
left: 0,
top: 0,
});
});
}
});
html,
body {
width: 100%;
height: 100%;
}
div {
font-family: Arial;
font-size: 20px;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one">Click me</div>
<div id="two">Flying letters based on #one</div>
<div>No flying letters</div>
You can simply change your selector to some class which is same to all divs then inside event handler you just need to check if the div which is clicked has id has one using && if yes then only if part will get executed .
Demo Code :
$(document).ready(function() {
var isRandom = false;
$('#one, #two').html(function(i, html) {
var chars = $.trim(html).split("");
return '<span>' + chars.join('</span><span>') + '</span>';
});
//chnage slector
$('div.sameclass').click(function() {
isRandom = !isRandom;
//check if the div which is clicked has id one..
if (isRandom && $(this).attr("id") == "one") {
$('span').each(function() {
$(this).css({
"position": "absolute"
});
$(this).animate({
left: Math.random() * window.outerWidth / 2,
top: Math.random() * window.outerHeight / 2,
});
});
} else {
$('span').each(function() {
$(this).css({
"position": "relative"
});
$(this).animate({
left: 0,
top: 0,
});
});
}
});
});
html,
body {
width: 100%;
height: 100%;
}
div {
font-family: Arial;
font-size: 20px;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one" class="sameclass">Click me</div>
<div id="two" class="sameclass">Flying letters based on #one</div>
<div class="sameclass">No flying letters</div>
I have a ".jumbotron" in which I need to change background-images just with timer. I tried to manage that with JQuery, but the script doesn't work. Here is it:
var imgHead = [
'cover.jpg',
'cover1.jpg',
'cover2.jpg'
];
function Jumbotron(){
if(i > (imgHead.length - 1)){
$('.jumbotron').animate({'opacity': '0'}, 200, function(){
i = 1;
$('.jumbotron').css('background-image', 'url("+imgHead[0]+")');
});
$('.jumbotron').animate({'opacity': '1'}, 200);
} else {
$('.jumbotron').animate({'opacity': '0'}, 200, function(){
$('.jumbotron').css('background-image', 'url("+imgHead[i]+")');
i++;
});
$('.jumbotron').animate({'opacity': '1'}, 200);
};
};
var intervalJumbotron = setInterval(Jumbotron, 3000);
The problem as I said in the comments is the string concatenation in assigning the background-image value.
var imgHead = [
'//placehold.it/64X64/ff0000',
'//placehold.it/64X64/00ff00',
'//placehold.it/64X64/0000ff'
];
var i = 0;
function Jumbotron() {
if (i >= imgHead.length) {
i = 0;
}
$('.jumbotron').animate({
'opacity': '0'
}, 200, function() {
$(this).css('background-image', 'url("' + imgHead[i++] + '")').animate({
'opacity': '1'
}, 200);
});
};
var intervalJumbotron = setInterval(Jumbotron, 3000);
Jumbotron();
.jumbotron {
height: 64px;
background-repeat: no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron"></div>
I hope to create a text transition animation using JQuery and have run into an issue of timing. I've looked around some other threads and have not been able to figure out the proper solution to what I am trying to accomplish. Here is the HTML I have:
<div id="t1">
<span>T</span>
<span>H</span>
<span>I</span>
<span>S</span>
</div>
<div id="t2">
<span>T</span>
<span>H</span>
<span>A</span>
<span>T</span>
</div>
JS:
function showMessage(obj, up){
if(dir){
$(obj).children().each(function(i, el) {
setTimeout(function() {
$(el).animate({
'opacity': 1.0,
'top': '0px'
}, 450);
}, 500 + (i * 150));
});
} else {
$(obj).children().each(function(i, el) {
setTimeout(function() {
$(el).animate({
'opacity': 0,
'top': '-30px'
}, 450);
}, 3000 + (i * 150));
});
}
}
showMessage("#t1", true);
showMessage("#t1", false);
showMessage("#t2", true);
showMessage("#t2", false);
Both THIS and THAT are being displayed at the same time. How can I make it so the second isn't displayed until the first has completely disappeared?
demo: jsfiddle
can you chain them?
showMessage("#t1", true, function(){
showMessage("#t1", false, function(){
showMessage("#t2", true, function(){
showMessage("#t2", false, function(){});
});
});
});
and then include counters in your showMessage to check if all the spans have been displayed
function showMessage(obj, up, callback){
var counter = 1;
var numberOfChildren = $(obj).children().size();
if(up){
$(obj).children().each(function(i, el) {
setTimeout(function() {
$(el).animate({
'opacity': 1.0,
'top': '0px'
}, 450, function(){
counter++;
console.log(counter);
if ( counter == numberOfChildren )
{
callback();
}
});
}, 500 + (i * 150));
});
}
else {
$(obj).children().each(function(i, el) {
setTimeout(function() {
$(el).animate({
'opacity': 0,
'top': '-30px'
}, 450, function(){
counter++;
console.log(counter);
if ( counter == numberOfChildren )
{
callback();
}
});
}, 3000 + (i * 150));
});
}
}
$(function() {
showMessage(".dev", true, function(){
showMessage(".dev", false, function(){
showMessage(".dev2", true, function(){
showMessage(".dev2", false, function(){});
});
});
});
});
updated dir to up.
setTimeout is performed under vacuum. Anonymous function does not know about your external variables i and el
Try substituting .delay() for setTimeout , calling second set of animations when i is equal to total .length of first set of animations within .each() called on #t1 .children() : span elements
function showMessage(obj, dir) {
var first = obj[0], second = obj[1];
$(first).children().each(function(i, el) {
$(el).delay(500 + (i * 150)).animate({
"opacity": 1.0,
"top": "0px"
}, 450, function() {
// when all `first` : `#t1` `span` animations complete,
// call `next` with `second`:`#t2` as parameter
if (i === first.length) next(second)
});
});
var next = function(elems) {
$(elems).children().each(function(i, el) {
$(el).delay(3000 + (i * 150)).animate({
"opacity": 0,
"top": "-30px"
}, 450);
});
}
}
showMessage(["#t1", "#t2"]);
#t1 span {
opacity: 0;
top: 30px;
}
#t2 span {
opacity: 1;
top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="t1">
<span>T</span>
<span>H</span>
<span>I</span>
<span>S</span>
</div>
<div id="t2">
<span>T</span>
<span>H</span>
<span>A</span>
<span>T</span>
</div>
I have three boxes and now, there are working as i expected. But, I need this work automatically every 30 secs without 'click' event. Please see this fiddle http://jsfiddle.net/ykbgT/8493/. Any idea?
code as below
<div id="box1" class="box">Div #1</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
$('.box').click(function () {
$('.box').each(function () {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
} else if ($(this).offset().left > $('.box').width()) {
$(this).animate({
left: '50%',
}, 500);
} else {
$(this).animate({
left: '-150%',
}, 500);
}
});
});
You can use a javascript method called setinterval();
setInterval() - executes a function, over and over again, at specified
time intervals.
JSFIDDLE DEMO
setInterval(function(){
$('.box').each(function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
} else if ($(this).offset().left > $('.box').width()) {
$(this).animate({
left: '50%',
}, 500 );
} else {
$(this).animate({
left: '-150%',
}, 500 );
}
});
}, 30000);
setInterval(function() {
$('.box').each(function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
} else if ($(this).offset().left > $('.box').width()) {
$(this).animate({
left: '50%',
}, 500);
} else {
$(this).animate({
left: '-150%',
}, 500);
}
});
}, 30000);