We Keep Coding

How to add images beside each other in index.js dropping script?

I'm using a Age verify-er at the this codepen.
The following is what I have sliding down from the top of the screen:
$(document).ready(function() {
$.age_verifier_id = "28915";
$.age_verifier_ajax_url = "http://selectoil.com/wp-admin/admin-ajax.php";
$.AgeVerifier({
enabled: "1",
mode: "age",
minimum_age: "21",
cookie_expiration: "365",
animation: "slide",
title: "Welcome to My website",
text: "Please use the slider to verify your age",
background: "#333",
background_type: "color",
background_image_url: "http://selectoil.com/wp-content/uploads/2017/06/icon-logo.png",
text_color: "#ffffff",
submit_text: "Enter",
error_message: "You need to be at least [age] years old to continue.",
safe_url: "",
safe_url_enabled: "0"
});
});
I'm trying to make two images 200px by 200px each slide down side by side each other above the "Welcome to my website" text and slides down following the same slide sequence

I recommend to use an external animation library.
There is a CSS only library called animate.css
Then you can achieve your requirement like this:
$('#btn').on('click', (e) => {
$('#overlay').fadeOut();
});
html,body{
margin:0;
padding:0;
}
#overlay {
background-color: #1AB4A1;
height: 100%;
margin:0;
position: fixed;
width: 100%;
}
#welcomeContainer {
padding:20px 0px 0px 0px;
text-align: center;
}
#welcomeContainer img {
height: 200px;
width: 200px;
}
#btn {
background-color: red;
border-radius: 5px;
padding: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet" />
<div id="overlay">
<div id="welcomeContainer" class="animated fadeInDownBig delay-1s">
confirm
<br/>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" />
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" />
</div>
</div>
<div>
content behind
</div>

JQuery slow image change

I have 2 pictures.
<div class="work-default-row">
<img class="img1" src="/files/ourWork/titleImages/img1.jpg"/>
<img class="img2" src="/files/ourWork/titleImages/img2.jpg"/>
</div>
In CSS
.work-default-row {
position:relative;
}
.img1 {
width:100%;
height:400px;
}
.img2 {
position:absolute;
top:0px;
left:3000px;
width:100%;
height:400px;
}
and JavaScript
$(".work-default-row").hover(function(){
$(".img2", this).stop().animate({left:"0"},{queue:false,duration:200});
}, function() {
$(".img2", this).stop().animate({left:"3000px"},
{queue:false,duration:200});
});
It "works", on hover, the second image just came from nowhere and overlays the first image. But this solution is HORRIBLE.(The position of img1 is in the middle of page, So I can see how the img2 come from right through whole page and in resolution bigger than 3000px, user is able to see the second image)
Please, can somebody help me and tell me how can i make this images change effective?

If you have the width of the container you can set it to hide anything outside of it with.
#container_id{
overflow:hidden;
}
It looks like your using the work-default-view as your container.

Try this.
$(".slider").hover(
function() {
$(".slider-inner", this)
.stop()
.animate({ left: "0" }, { queue: false, duration: 200 });
},
function() {
$(".slider-inner", this)
.stop()
.animate({ left: "-100vw" }, { queue: false, duration: 200 });
}
);
.slider{
overflow: hidden;
}
.slider-inner {
width: 200vw;
position: relative;
display: flex;
flex-direction: row;
overflow:hidden;
}
img{
width: 100vw;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<div class="slider-inner">
<img src="https://images.unsplash.com/photo-1538291397218-01e8830ddc68?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=fd07afd311ed4a74d0eed33089be01bb&auto=format&fit=crop&w=500&q=60" />
<img src="https://images.unsplash.com/photo-1538306196939-82f33cccacad?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c3ebd64083bb95f0b27c5d222b0f170&auto=format&fit=crop&w=500&q=60" />
</div>
</div>

Try changing width of img2 instead of left.
$(".work-default-row").hover(function() {
$(".img2", this).stop().animate({
width: "100%"
}, {
queue: false,
duration: 200
});
}, function() {
$(".img2", this).stop().animate({
width: "0"
}, {
queue: false,
duration: 200
});
});
.work-default-row {
position: relative;
}
.img1 {
width: 100%;
height: 400px;
}
.img2 {
position: absolute;
top: 0px;
width: 0;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work-default-row">
<img class="img1" src="https://picsum.photos/200" />
<img class="img2" src="https://picsum.photos/200" />
</div>

How can I fire animations without queueing?

Each of these 3 divs travels 500px over 6000ms. After 4000ms, I want:
the red div to fade out over its last 2000ms
the green dive to fade in over 2000ms
the green div to start its journey of 500px
all simultaneously.
Then, after 8000ms, when the green div is 4000ms into its journey, I want:
the green div to fade out over its last 2000ms
the yellow dive to fade in over 2000ms
the yellow div to start its journey of 500px
all simultaneously.
Then, at 12000ms, when the yellow div is 4000ms into its journey, I want it to fade out over its last 2000ms of its journey.
It's about having total control with overlapping animations. I tried queue() and dequeue(), queue: false, setTimeout... I can't make heads or tails of it. How do I do this?
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
div {
width:50px;
height:50px;
position:absolute;
left:0;
}
#div1 {background:red;top:0;}
#div2 {background:green;top:55px;}
#div3 {background:yellow;top:110px;}
</style>
</head>
<body>
<script>
$(document).ready(function(){
$("#div1").animate({left: "500px"}, 6000);
$("#div2").delay(4000).animate({left: "500px"}, 6000);
$("#div3").delay(8000).animate({left: "500px"}, 6000);
});
</script>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>

You can use css transition and start , step options of .animate()
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
div {
width: 50px;
height: 50px;
position: absolute;
left: 0;
transition: opacity 2.5s ease;
}
#div1 {
background: red;
top: 0;
}
#div2 {
background: green;
top: 55px;
opacity:0;
}
#div3 {
background: yellow;
top: 110px;
opacity:0;
}
</style>
</head>
<body>
<script>
$(document).ready(function() {
function step(now, fx) {
var n = Math.round(now)
if (n === 250 || n === 251) {
$(this).css("opacity", 0)
}
}
function start() {
$(this).css("opacity", 1)
}
$("#div1").animate({
left: "500px"
}, {
duration: 6000,
step:step
});
$("#div2").delay(4000).animate({
left: "500px"
}, {
duration: 6000,
start:start,
step:step
});
$("#div3").delay(8000).animate({
left: "500px"
}, {
duration: 6000,
start:start,
step:step
});
});
</script>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>

Is this what you are trying to implement?
idArray = ['div1', 'div2', 'div3', 'div4'];
div = {};
//Create a flag for every item in list.
$(idArray).each(function(i, val) {
div['Action' + i] = false;
});
duration = 6000; //duration of each animation
overlap = 4000; //the time when overlap happens
fadeAt = 2000; //speed at which element appear/disappear
iLikeToMoveIt(0); //initialize animation
function iLikeToMoveIt(i) {
$now = $("#" + idArray[i]); //animation element
$next = $("#" + idArray[++i]); //next element
$now.fadeIn(fadeAt).animate({
left: "500px"
}, {
duration: 6000,
queue: false,
progress: function(animation, progress, remainingMs) {
//check if flag is not set
if (!div['Action' + i] && remainingMs < fadeAt) {
//set the flag
div['Action' + i] = true;
$(this).fadeOut(fadeAt);
if ($next.length) {
//call function for next div
iLikeToMoveIt(i);
}
}
}
});
}
div {
width: 50px;
height: 50px;
position: absolute;
left: 0;
}
.hide {
display: none;
}
#div1 {
background: red;
top: 0;
}
#div2 {
background: green;
top: 55px;
}
#div3 {
background: yellow;
top: 110px;
}
#div4 {
background: blue;
top: 165px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1"></div>
<div id="div2" class="hide"></div>
<div id="div3" class="hide"></div>
<div id="div4" class="hide"></div>

Animated show and hide randomisation

I would like to know if it is possible to take my "comment" elements and apply some sort of effect so that they randomly appear one at a time within the black container. The "comments" also appear in random locations within the container.
Is it a more glorified show/hide Jquery effect?
I have set up a JSFiddle
.review{
background-color:black;
width:100%;
height:500px;
}
#comment1{
position:relative;
top:50%;
width:20px;
height:20px;
background-color:#ffffff;
}
<div class="review">
<div id="comment1"></div>
<div id="comment2"></div>
<div id="comment3"></div>
<div id="comment4"></div>
<div id="comment5"></div>
</div>

EDIT updated my solution according to your comments
DEMO https://jsfiddle.net/mattydsw/u2kdzcja/8/
var elements = $('.review div');
var lastShown = 0;
function fadeInRandomElement() {
// choose random element index to show
var randomIndex = Math.floor(Math.random()*elements.length);
// prevent showing same element 2 times in a row
while (lastShown == randomIndex) {
randomIndex = Math.floor(Math.random()*elements.length);
}
var randomElement = elements.eq(randomIndex);
// set random position > show > wait > hide > run this function once again
randomElement
.css({
top: Math.random()*100 + "%",
left: Math.random()*100 + "%"
})
.fadeIn(2000)
.delay(8000)
.fadeOut(2000, fadeInRandomElement);
}
fadeInRandomElement();
.review{
background-color:black;
width:100%;
height:500px;
}
.review div {
position: absolute;
display: none;
width:20px;
height:20px;
background-color:#ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="review">
<div id="comment1">1</div>
<div id="comment2">2</div>
<div id="comment3">3</div>
<div id="comment4">4</div>
<div id="comment5">5</div>
</div>

Just use a class for the effect, and Math.random function for getting random comment shown..
div[id*='comment']{
background: #aaa;
position: absolute;
left: -200px;
opacity: 0;
width:200px;
line-height: 40px;
text-align: center;
color: white;
height: 40px;
-webkit-transition: 1s all ease;
transition: 1s all ease;
}
div[id*='comment'].show{
left: 0;
opacity: 1;
}
and here's the jQuery
function generate() {
$("[id*='comment']").each(function(){
$(this).removeClass("show");
})
var number= Math.floor(Math.random() * 5) + 1
$("#comment"+number).addClass("show");
}
$(function(){
setInterval(generate, 2000);
})
here's a working fiddle
Thanks :)

Please refer the following link: http://jsfiddle.net/wrb2t6z6/
HTML
<div class="review">
<div id="comment1" class="children"></div>
<div id="comment2" class="children"></div>
<div id="comment3" class="children"></div>
<div id="comment4" class="children"></div>
<div id="comment5" class="children"></div>
</div>
CSS
.review{
background-color:black;
width:100%;
height:500px;
}
.children{
position:relative;
top:50%;
width:20px;
height:20px;
margin:auto;
}
JQUERY
$(function(){
setInterval(generate, 500);
})
function generate() {
$("[id*='comment']").each(function(){
$(this).css("background-color", "black")
})
var number= Math.floor(Math.random() * 5) + 1
$("#comment"+number).css("background-color", "white")
}

Toggle Div on click

I want to modify this code for click event. But I am not able to do so. My requirement is to slide the panel on click (not hover) and again rollback on click (and not mouse out).
HTML
<div id="sidePanel">
<div id="panelContent">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FWebsTutorial&width=200&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&appId=253401284678598" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:258px;" allowTransparency="true"></iframe>
</div>
<div id="panelHandle"><p>Facebook</p></div>
</div>
CSS
/* ===== Primary Styles ========================================================
Author: NTechi | WebsTutorial
========================================================================== */
body{
font-family:Arial;
}
#sidePanel{
width:245px;
position:fixed;
left:-202px;
top:15%;
}
#panelHandle{
background-image: -webkit-linear-gradient(top,#333,#222);
background-image: -moz-linear-gradient(center top , #333333, #222222);
background-image: -o-linear-gradient(center top , #333333, #222222);
background-image: -ms-linear-gradient(center top , #333333, #222222);
background-image:linear-gradient(center top , #333333, #222222);
height:150px;
width:40px;
border-radius:0 5px 5px 0;
float:left;
cursor:pointer;
}
#panelContent{
float:left;
border:1px solid #333333;
width:200px;
height:300px;
background-color:#EEEEEE;
}
#panelHandle p {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
color: #FFFFFF;
font-size: 24px;
font-weight: bold;
left: -4px;
margin: 0;
padding: 0;
position: relative;
top: 26px;
}
JavaScript
jQuery(function($) {
$(document).ready(function() {
$('#panelHandle').hover(function() {
$('#sidePanel').stop(true, false).animate({
'left': '0px'
}, 900);
}, function() {
jQuery.noConflict();
});
jQuery('#sidePanel').hover(function() {
// Do nothing
}, function() {
jQuery.noConflict();
jQuery('#sidePanel').animate({
left: '-201px'
}, 800);
});
});
});
Any help would be really helpful.
Thanks in advance!

Use Toggle API Instead http://api.jquery.com/toggle-event/
$('#panelHandle').toggle(function() {
$('#sidePanel').stop(true, false).animate({
'left': '0px'
}, 900);
}, function() {
jQuery('#sidePanel').animate({
left: '-201px'
}, 800);
});
Fiddle: http://jsfiddle.net/GPdFk/4812/

Simple way to do this. Change the hover event to toggle event.
Using your jsfiddle it would be something like this:
$(document).ready(function() {
$('#panelHandle').toggle(function() {
$('#sidePanel').stop(true, false).animate({
'left': '0px'
}, 900);
}, function() {
jQuery.noConflict();
jQuery('#sidePanel').animate({
left: '-201px'
}, 800);
});
});

It can easily be done using .toggle()
Here is the updated code:
jQuery(function($) {
$('#panelHandle').toggle(function() {
$('#sidePanel').animate({
'left': '0px'
}, 900);
}, function() {
$('#sidePanel').animate({
'left': '-202px'
}, 900);
});
});