We Keep Coding

Play sound if div pass a offset while in animation?

Long story short, I used this source, to simulate a case opening: https://codepen.io/zheleznov/pen/POXMdO
<div class="raffle-roller-holder">
<div class="raffle-roller-container" style="margin-left: 0px;">
</div>
</div>
</div>
<center><span style="font-size: 25px;">You winning is <span style="color: green;" id="rolled">rolling</span>
<br>
<button onclick="generate(1);">go</button>
<button onclick="window.location='';">reset</button></center>
<br>
<div class="inventory"></div>
#import url('https://fonts.googleapis.com/css?family=Arvo');
body {
background: rgb(25,25,33);
}
.raffle-roller {
height: 100px;
position: relative;
margin: 60px auto 30px auto;
width: 900px;
}
.raffle-roller-holder {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100px;
width: 100%;
}
.raffle-roller-holder {
overflow: hidden;
border-radius: 2px;
border: 1px solid #3c3759;
}
.raffle-roller-holder {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100px;
width: 100%;
}
.raffle-roller-container {
width: 9999999999999999999px;
max-width: 999999999999999999px;
height: 100px;
background: #191726;
margin-left: 0;
transition: all 8s cubic-bezier(.08,.6,0,1);
}
.raffle-roller-holder:before {
content: "";
position: absolute;
border: none;
z-index: 12222225;
width: 5px;
height: 100%;
left: 50%;
background: #d16266;
}
.item {
display: inline-block;
float: left;
margin: 4px 0px 0.5px 5px;
width: 85px;
height: 88px;
float: left;
border: 1px solid #70677c;
background: #14202b;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
}
.class_red_item {
border-bottom: 4px solid #EB4B4B;
}
img {
border: 0;
vertical-align: middle;
}
.winning-item {
border: 2px solid #66b233;
position: relative;
top: -1px;
border-bottom: 4px solid #66b233;
}
.inventory {
margin: 0 auto;
width: 960px;
max-width: 953px;
padding: 10px 15px 6px;
height: auto;
border: 2px solid #1c3344;
background: #0e1a23;
}
.inventory > .item {
float: none;
cursor: pointer;
margin: 4px 2px 0.5px 2px;
}
.inventory > .item:hover {
background-size: 90%;
background-color: #182a38;
}
.inventory > .item:active {
height: 83px;
width: 80px;
position: relative;
top: -2px;
border: 2px solid #356d27;
border-bottom: 4px solid #356d27;
}
var items = {
simple: {
skin: "M4A1-S | Cyrex",
img: "https://steamcdn-a.akamaihd.net/apps/730/icons/econ/default_generated/weapon_m4a1_silencer_cu_m4a1s_cyrex_light_large.144b4053eb73b4a47f8128ebb0e808d8e28f5b9c.png"
},
middle: {
skin: "M4A1-S | Chantico's Fire",
img: "https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpou-6kejhz2v_Nfz5H_uO1gb-Gw_alIITCmX5d_MR6j_v--YXygED6_UZrMTzwJYSdJlU8N1zY81TrxO_v0MW9uJnBm3Rk7nEk5XfUmEeyhQYMMLIUhCYx0A"
},
super: {
skin: "M4A4 | Asiimov",
img: "https://steamcdn-a.akamaihd.net/apps/730/icons/econ/default_generated/weapon_m4a1_cu_m4_asimov_light_large.af03179f3d43ff55b0c3d114c537eac77abdb6cf.png"
}
};
function generate(ng) {
$('.raffle-roller-container').css({
transition: "sdf",
"margin-left": "0px"
}, 10).html('');
var randed2 = prompt('enter skin(1-asiimov,3-cyrex,2-chantico)','');
for(var i = 0;i < 101; i++) {
var element = '<div id="CardNumber'+i+'" class="item class_red_item" style="background-image:url('+items.simple.img+');"></div>';
var randed = randomInt(1,1000);
if(randed < 50) {
element = '<div id="CardNumber'+i+'" class="item class_red_item" style="background-image:url('+items.super.img+');"></div>';
} else if(500 < randed) {
element = '<div id="CardNumber'+i+'" class="item class_red_item" style="background-image:url('+items.middle.img+');"></div>';
}
$(element).appendTo('.raffle-roller-container');
}
setTimeout(function() {
if(randed2 == 2) {
goRoll(items.middle.skin, items.middle.img);
} else if(randed2 == 1) {
goRoll(items.super.skin, items.super.img);
} else {
goRoll(items.simple.skin, items.simple.img);
}
}, 500);
}
function goRoll(skin, skinimg) {
$('.raffle-roller-container').css({
transition: "all 8s cubic-bezier(.08,.6,0,1)"
});
$('#CardNumber78').css({
"background-image": "url("+skinimg+")"
});
setTimeout(function() {
$('#CardNumber78').addClass('winning-item');
$('#rolled').html(skin);
var win_element = "<div class='item class_red_item' style='background-image: url("+skinimg+")'></div>";
$(win_element).appendTo('.inventory');
}, 8500);
$('.raffle-roller-container').css('margin-left', '-6770px');
}
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
I managed to add multiple case openings at once, and other stuffs, but, what I want to add now is that, to play a sound when a div passes a certain offset.
I've tried to check where is the middle position, using offsetLeft, and I got 411.
My question is, can I add sound everytime a div passes that offset?
Or is there any other way to play a sound individually for each div?
(The effect I want to get is this one: https://www.youtube.com/watch?v=9ChsGHLPyG8)

Fading in a div while animating from the left/right/top/bottom

I am trying to make a transition where a div set to "display:none" fades in and moves to the center of the page from either the left/right/top/bottom.
How can I get it to simultaneously fade in and animate({left: })?
My current code first fades it in and then animates it.
$("#button" ).click(function(){
$("#text").fadeIn(1000, function(){
$("#text" ).animate({ "left": "+=50%" }, "slow" )
})
})
Current JSFiddle

Use the notation like in my snippet below to animate both parameters at the same time. Note: I used opacity for the fading animation. (And use position: absolute for the animated element)
$(document).ready(function() {
$("#button").click(function() {
$("#text").animate({
left: '+=50%',
opacity: '1'
}, 1000);
})
})
#button {
display: inline-block;
border-radius: 5px 5px 5px 5px;
border: 2px solid deepskyblue;
color: white;
background-color: black;
padding: 2px;
margin: 2px;
}
#text {
color: deepskyblue;
font-size: 2vw;
position: absolute;
display: inline-block;
top: 60px;
opacity: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button">
Move
</div>
<div id="text">
Hello there
</div>

position of the div with id text should be absolute. Here is your code
$(document).ready(function() {
$("#button").click(function() {
$("#text").fadeIn(1000, function() {
$("#text").animate({
"left": "+=50%"
}, "slow")
})
})
})
#button {
display: inline-block;
border-radius: 5px 5px 5px 5px;
border: 2px solid deepskyblue;
color: white;
background-color: black;
padding: 2px;
margin: 2px;
}
#text {
color: deepskyblue;
fontsize: 2vw;
position: absolute;
display: inline-block;
top: 60px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button">
Move
</div>
<div id="text">
Hello there
</div>

I'm struggling to get this jquery slide down and up to work

The div I'm animating in jquery is supposed to slide out to expand the width. I've gotten the width animation to work but after adding the slideDown and up code nothing works, the way it should work is:
Enquiries should be clicked and it expands and after it expands the. For slides down and when its clicked again, first the fork slides up and then the ENQUIRIES- shown goes back to its original width.
I'm not sure where my codes gone wrong as I'm new to jquery and java script. THANK YOU FOR ANY HELP!
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
$(this).animate({
width: "950px",
borderRadius: "0px"
}, 1000);
setTimeout(function() {
$('#enquiry-form').slideDown('slow');
}, 1000);
function() {
if ($('#enquiry-form').is("visible") {
$('#enquiry-form').slideUp("slow");
else($('#enquiry-form').is("hidden") {
$('#enquiry-form ').slideDown("slow");
});
});
};
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 10px 19px 0 0;
display: inline-block;
}
#enquiry-form {
width: 950px;
height: 400px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
</div>
</div>

I changed i few things in your js code, i used a class to define the condition when to slideup or down
See the result:
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
var current = $(this)
if ($('#enquiry-shown').hasClass("active")) {
$('#enquiry-form').slideUp('slow', function() {
current.animate({
width: "210px",
borderRadius: "50px"
}, 1000);
});
$('#enquiry-shown').removeClass("active");
} else {
current.animate({
width: "100%",
borderRadius: "0px"
}, 1000, function() {
$('#enquiry-form').slideDown('slow');
});
$('#enquiry-shown').addClass("active");
}
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 0px 20px 0 0;
display: inline-block;
transition: all 1s;
transform: rotate(-90deg);
}
#enquiry-form {
width: 100%;
height: 100px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
#enquiry-shown.active img {
transform: rotate(0deg);
padding-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
This is the enquiry form
</div>
</div>

I don't know if u want to achieve this effect, but try this and give me feedback:
$('#enquiry-shown').click(function() {
if($('#enquiry-form').is(':visible')){
$('#enquiry-form').slideUp('slow', function(){
$('#enquiry-shown').animate({
width: "210px",
borderRadius: "50px"
}, 1000);
});
}
else if($('#enquiry-form').is(':hidden')){
$('#enquiry-shown').animate({
width: "950px",
borderRadius: "0px"
}, 1000, function(){
$('#enquiry-form').slideDown('slow');
});
}
});

You have a lot of syntax errors such as incorrectly matched brackets, missing parenthesis, missing function name, and using else when you should use else if.
When you fix all of them it looks like your click function already has some of your intended functionality.
Next I'd suggest removing the setTimeout in favor of jQuery's animate end handler, which you use by attaching a function to most animations.
Lastly you should refactor your code a little. I don't think is('visible') does what you think it does, but luckily there's a slideToggle method that does do what you want pretty easily.
Your click handler then needs to consider cases when the menu is already open and when it's not open and then act accordingly. For that you might consider using toggleClass and then checking which class it is with hasClass before deciding what animation to perform.
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
if(!$(this).hasClass('closed')){ // if the form is not closed
$(this).animate({ // animate the form to open state
width: "950px",
borderRadius: "0px",
}, 1000, ()=>{
$("#enquiry-form").slideToggle()
});
}else{ // if the form is closed animate in reverse order
$("#enquiry-form").slideToggle(
()=>{
$(this).animate({
width : "210px",
borderRadius : "50px"
}, 1000);
}
)
}
$(this).toggleClass('closed'); // toggle the class
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 10px 19px 0 0;
display: inline-block;
}
#enquiry-form {
width: 950px;
height: 400px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
<div> Hello I am a form </div>
</div>
</div>

jQuery - Maintaining focus on button when clicked outside of it

So I've been able to create 2 buttons. Here: http://jsfiddle.net/0y940r11/2/
I really can't figure out how I can keep the focus on the clicked button after I have click somewhere outside the buttons.
Can some one point me in the direction?
$(document).ready(function() {
$(".button-off").on("click", function() {
$(".corner-off").show();
$(".corner-on").hide();
});
$(".button-on").on("click", function() {
$(".corner-on").show();
$(".corner-off").hide();
});
});
.button-on,
.button-off {
border: 1px solid #ccc;
height: 120px;
width: 160px;
position: relative;
background: white;
border-radius: 8%;
}
.button-on:active,
.button-on:focus,
.button-off:active,
.button-off:focus {
border: 4px solid #FFCC00;
}
.active {
border: 4px solid #FFCC00;
}
button:active,
button:focus {
outline: 0;
}
.corner-off,
.corner-on {
width: 0px;
height: 0px;
border-bottom: 30px solid transparent;
border-left: 30px solid #FFCC00;
position: absolute;
top: 0;
left: 0;
}
.tick:after {
content: "\2713";
position: absolute;
top: -1px;
left: 5px;
color: white;
}
<button class="button-on">
<div class="corner-on" style="display:none"></div>
<span class="tick"></span>
ON
</button>
<button class="button-off">
<span class="corner-off" style="display:none"></span>
<span class="tick"></span>
OFF
</button>

use $(document).on("click" and focus() to achieve this
var lastClickedButton = $(".button-on")[0];
$(document).ready(function () {
$(".button-off").on("click", function () {
lastClickedButton = this;
$(".corner-off").show();
$(".corner-on").hide();
});
$(".button-on").on("click", function () {
lastClickedButton = this;
$(".corner-on").show();
$(".corner-off").hide();
});
});
$(document).on("click", function (e) {$(lastClickedButton).focus();});
.button-on, .button-off {
border: 1px solid #ccc;
height: 120px;
width: 160px;
position: relative;
background: white;
border-radius: 8%;
}
.button-on:active, .button-on:focus, .button-off:active, .button-off:focus {
border: 4px solid #FFCC00;
}
.active {
border: 4px solid #FFCC00;
}
button:active, button:focus {
outline:0;
}
.corner-off, .corner-on {
width: 0px;
height: 0px;
border-bottom: 30px solid transparent;
border-left: 30px solid #FFCC00;
position: absolute;
top: 0;
left: 0;
}
.tick:after {
content:"\2713";
position: absolute;
top: -1px;
left: 5px;
color: white;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button-on">
<div class="corner-on" style="display:none"></div> <span class="tick"></span>
ON</button>
<button class="button-off"> <span class="corner-off" style="display:none"></span>
<span class="tick"></span>
OFF</button>
Demo : http://jsfiddle.net/kishoresahas/0y940r11/4/

jquery animate is not working perfectly in ie8

It is working fine in all browsers except IE8.
On mouse over in IE8 all boxes are going up and on mouse leave all boxes are coming down,its happening only in IE8.
IE7 and IE9 it is working fine.
js
var timeoutId;
$('.box').mouseenter(function () {
var $this = $(this);
if (!timeoutId) {
timeoutId = window.setTimeout(function () {
timeoutId = null;
$this.stop().animate({
marginTop: '-224px',
height: '300px'
})
$this.find('.rotate-arrow').addClass('rotate');
$this.find('.header-content-span').css('display', 'none');
},500);
}
});
$('.box').mouseleave(function () {
var $this = $(this);
if (timeoutId) {
window.clearTimeout(timeoutId);
timeoutId = null;
}
$this.stop().animate({
marginTop: '0px',
height: '77px'
})
$this.find('.rotate-arrow').removeClass('rotate');
$this.find('.header-content-span').css('display', 'block');
});
html ( 3 boxes)
<div class="box">
<div class="box-heading bgc-cl1"></div>
<div class="box-content"></div>
</div>
css
.box{
float: left;
width: 290px;
height: 77px;
margin: 0px 8px;
overflow: hidden;
cursor: pointer;
-moz-box-shadow: 5px 5px 8px #888;
-webkit-box-shadow: 5px 5px 8px #888;
box-shadow: 5px 5px 8px #888;
position: relative;
z-index: 999;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative;
}