We Keep Coding

how do I can implement that gif animation

This is the animation that I want to implement this animation from youtube here.
I maked first part and just Im stuck on begining of the animation. Just dont know is here usefull use JS or another library, or just CSS.
Better you just download whole archive with my project cuz it has many png files for animation.
Here the archive of project
$(document).ready(function() {
let sack = $(".sack"),
leaf = $(".leaf"),
bonus = $(".bonus"),
water = $(".water"),
wheat = $(".wheat"),
timer = $('.timer'),
beer = $('.beer'),
content = $('.content'),
container = $('.container'),
text = $('.header p:first-child'),
header = $('.header'),
logo = $('.logo'),
width = $(window).width(),
height = $(window).height();
setTimeout(()=>{
sack.animate({'top': '-100px','left': '-80px'}, 500);
wheat.animate({'top': '-80px','right': '-80px'}, 500);
water.animate({'top': '0px', 'margin-left': '-27px'}, 500);
bonus.animate({'top': '-190px', 'right': '-10px'}, 500);
leaf.animate({'top': '-230px'}, 500);
timer.animate({'opacity': 0}, 400);
beer.animate({'bottom': '65px'}, 500);
setTimeout(()=> {
if (height >= 670) {
content.css({'transform': 'translate(59px, 155px)'})
} else if (height >= 633) {
content.css({'transform': 'translate(59px, 135px)'})
} else if (height >= 620) {
content.css({'transform': 'translate(59px, 125px)'})
} else if (height >= 550) {
content.css({'transform': 'translate(59px, 85px)'})
}
// console.log(height)
// content.css({'transform': 'translate(59px, 155px)'})
// container.css({'background-position': '0 100px'});
setTimeout(()=> {
// leaf.attr("src","../images/itemleafm.png");
// leaf.css({'top': '-230px','margin': '-47px auto','right': '123px', 'position': 'absolute'})
beer.attr("src","https://i.ibb.co/2WJpCpQ/bankaf.png");
setTimeout(()=> {
container.css({'background': 'url(https://i.ibb.co/47Lny0p/supermarket.png', 'background-repeat': 'no-repeat', 'background-size':'cover'});
sack.animate({'margin-left': '-180px'}, 500);
wheat.animate({'margin-right': '-180px'}, 500);
water.animate({'margin-left': '-127px'}, 500);
bonus.animate({'margin-right': '-110px'}, 500);
header.css({'padding-bottom':'150px'});
text.css({'transition':'1s'});
text.css({'margin-top':'-150px'});
logo.css({'top': '0'});
leaf.css({'opacity': 0});
}, 1000)
}, 1000)
}, 1000);
}, 1000);
})
* {
box-sizing: border-box;
}
body {
margin: 0;
}
p {
margin: 0;
}
.container {
min-width: 100%;
height: 100vh;
background: linear-gradient(0deg, rgba(24, 60, 112, 0.9), rgba(24, 60, 112, 0.9)), linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://i.ibb.co/47Lny0p/supermarket.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -18px -122px;
background-size: 300px;
background-position: 0 300px;
overflow-x: hidden;
overflow-y: hidden;
transition: background-image 1s;
}
.header {
width: 100%;
}
.logo {
background: linear-gradient(0deg, #183C70 23.14%, rgba(24, 60, 112, 0) 100%);
transform: matrix(1, 0, 0, -1, 0, 0);
position: absolute;
width: 100%;
top: -200px;
text-align: center;
transition: 1s;
}
.logo img {
transform: matrix(1, 0, 0, -1, 0, 0);
}
.header,
.content {
display: flex;
justify-content: center;
flex-direction: column;
}
.header p:first-child {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 23px;
text-align: center;
color: #FFFFFF;
margin-top: 30px;
}
.header p:last-child {
font-family: 'Roboto';
font-style: normal;
font-family: Roboto;
font-style: normal;
font-weight: 900;
font-size: 64px;
line-height: 75px;
text-align: center;
color: #ffffff;
margin-top: 40px;
}
.content {
flex-direction: column;
align-items: center;
flex-wrap: wrap;
height: 300px;
transition: 1s;
}
.footer {
text-align: right;
bottom: 0;
width: 100%;
position: absolute;
padding: 10px 10px 10px 0;
}
.line-one,
.line-two {
width: 100%;
height: 150px;
position: relative;
}
img[alt='wheat'] {
position: absolute;
}
img[alt='sack'] {
top: 30px;
right: 30px;
position: absolute;
}
img[alt='water'] {
margin: 31px auto;
display: flex;
justify-self: center;
position: absolute;
right: 0px;
left: 0;
}
img[alt='bonus'] {
position: absolute;
right: 10px;
}
img[alt='leaf'] {
position: absolute;
top: 30px;
left: 60px;
}
.footer img:first-child {
opacity: .6;
}
img.beer {
position: absolute;
margin: 0 auto;
right: 0;
left: 0;
bottom: -170px;
}
#media (max-height: 600px) {
.header p:last-child {
margin-top: 10px;
}
.header p:first-child {
margin-top: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beer</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container" style="background-size: cover;background-position: center;">
<div class="logo">
<img src="https://i.ibb.co/6X3QHs3/Logo.png" width="90" height="63" alt="logo">
</div>
<div class="header after">
<p>Вращай смартфон, собери как </br> можно больше ингредиентов за </br> 60 секунд и узнай секретный </br> ингредиент!</p>
<p class="timer">60</p>
</div>
<div class="content">
<div class="line-one">
<img class="wheat" src="https://i.ibb.co/6ZYTvvb/itemw.png" alt="wheat">
<img class="water" width="50" height="90" src="https://i.ibb.co/Sxnz4j8/itemwat.png" alt="water">
<img class="sack" src="https://i.ibb.co/N1ch8ZC/items.png" alt="sack">
</div>
<div class="line-two">
<img class="leaf" src="https://i.ibb.co/2PmkYFc/iteml.png" alt="leaf">
<img class="bonus" src="https://i.ibb.co/JpKZjGK/itemb.png" alt="bonus">
</div>
</div>
<div class="footer">
<img class="seal" src="https://i.ibb.co/C8WQngb/seal.png" alt="seal">
<img class="beer" src="https://i.ibb.co/hCghLdh/banka.png" width="74" height="180" alt="beer">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
The animation only for mobile devices so you should look by inspector with width less than 400px and height less than 650
Here I have the problems with adaptive animation and z-index on leaf. It should be over beer, does not work.
Then you should noticed that there are several interaption in animation.
Please just need advice and little help to continue the work

Could use some pointers on this wonky animation

I've essentially made 3 sections that animate on hover. It all works wonderfully when I'm hovering over at a rather leasurely pace, but if I move the mouse quickly, the section in the middle seems to have a gap on the right side as it quickly tries to match the width that's been set for it.
I'm guessing only the right side is affected because it is positioned absolute and the left value has already been set, whereas the right side can essentially do what it needs to to match it's final state.
I've tried a bunch of different things to get it to work(changing values, parent container flex, positioning, etc), but with no luck. I'm not really sure how I can remedy this situation and I wanted to see what clever solutions I've missed.
Here's all the code, although I would focus more on the section commented out as "mid". If the snippet won't run, I've included it here on codepen
const left = document.querySelector(".left");
const mid = document.querySelector(".mid");
const right = document.querySelector(".right");
const container = document.querySelector(".container");
// ===== Hover States ======
/*
* Left Section
*/
//On Hover
left.addEventListener("mouseenter", () => {
container.classList.add("hover-left");
mid.classList.add("push-right");
});
//On Leave
left.addEventListener("mouseleave", () => {
container.classList.remove("hover-left");
mid.classList.remove("push-right");
});
/*
* Mid Section
*/
//On Hover
mid.addEventListener("mouseenter", () => {
container.classList.add("hover-mid");
});
//On Leave
mid.addEventListener("mouseleave", () => {
container.classList.remove("hover-mid");
});
/*
* Right Section
*/
//On Hover
right.addEventListener("mouseenter", () => {
container.classList.add("hover-right");
mid.classList.add("push-left");
});
//On Leave
right.addEventListener("mouseleave", () => {
container.classList.remove("hover-right");
mid.classList.remove("push-left");
});
:root {
--container-bg-color: #333;
--left-bg-color: rgba(223, 39, 39, 0.7);
--left-btn-hover-color: rgba(161, 11, 11, 0.3);
--mid-bg-color: rgba(70, 223, 39, 0.7);
--mid-btn-hover-color: rgba(24, 92, 10, 0.3);
--right-bg-color: rgba(39, 186, 223, 0.7);
--right-btn-hover-color: rgba(10, 18, 92, 0.3);
--hover-width: 50%;
--other-width: 25%;
--speed: 1000ms;
}
html,
body {
padding: 0;
margin: 0;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
h2 {
font-size: 4rem;
color: #fff;
position: absolute;
left: 50%;
top: 30%;
transform: translateX(-50%);
white-space: nowrap;
}
.btn {
display: block;
position: absolute;
left: 50%;
top: 50%;
height: 2.5rem;
padding-top: 1.3rem;
width: 15rem;
text-align: center;
color: #fff;
border: #fff solid 0.2rem;
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
transform: translateX(-50%);
}
.split.left .btn:hover {
background-color: var(--left-btn-hover-color);
border-color: var(--left-btn-hover-color);
}
.split.mid .btn:hover {
background-color: var(--mid-btn-hover-color);
border-color: var(--mid-btn-hover-color);
}
.split.right .btn:hover {
background-color: var(--right-btn-hover-color);
border-color: var(--right-btn-hover-color);
}
.container {
position: absolute;
width: 100%;
height: 100%;
background: var(--container-bg-color);
}
.split {
position: relative;
width: 33.3333333333333333333%;
height: 100%;
overflow: hidden;
}
.split.left {
position: absolute;
left: 0;
}
.split.left:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--left-bg-color);
}
.split.mid {
position: absolute;
left: 33.3333333333333333333%;
}
.split.mid:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--mid-bg-color);
}
.split.right {
position: absolute;
right: 0;
}
.split.right:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--right-bg-color);
}
.split.left,
.split.mid,
.split.right,
.split.left:before,
.split.mid:before,
.split.right:before {
transition: var(--speed) all ease-in-out;
}
/*
left
*/
.hover-left .left {
width: var(--hover-width);
}
.hover-left .mid {
width: var(--other-width);
}
.hover-left .mid:before {
z-index: 2;
}
.hover-left .right {
width: var(--other-width);
}
.hover-left .right:before {
z-index: 2;
}
/*
mid
*/
.hover-mid .mid {
left: 25%;
width: var(--hover-width);
}
.hover-mid .left {
width: var(--other-width);
}
.hover-mid .left:before {
z-index: 2;
}
.hover-mid .right {
width: var(--other-width);
}
.hover-mid .right:before {
z-index: 2;
}
/*
Right
*/
.hover-right .right {
width: var(--hover-width);
}
.hover-right .left {
width: var(--other-width);
}
.hover-right .left:before {
z-index: 2;
}
.hover-right .mid {
width: var(--other-width);
}
.hover-right .mid:before {
z-index: 2;
}
/* Push Mid */
.split.push-right {
left: 50%;
}
.split.push-left {
left: 25%;
}
#media screen and (max-height: 700px){
h2{
top: 10%;
}
.btn{
top: 60%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Test</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="container">
<div class="split left">
<h2>Option1</h2>
Learn More
</div>
<div class="split mid">
<h2>Option 2</h2>
Learn More
</div>
<div class="split right">
<h2>Option 3</h2>
Learn More
</div>
</div>
<script src="js/app.js"></script>
</body>
</html>

I would ditch the javascript and do this with css - flexbox. You may have ran into trouble trying it the first time because of absolutely positioned elements.
To set this up I removed all your absolutely positioned classes, set the parent container to display flex.
flex shorthand (flex-grow | flex-shrink | flex-basic)\
More Information: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Then you can tell your slides flex: 1 0 var(--other-width); Even though your other width is only 25% they will fill empty space automatically because the 1 tells them they can grow.
Then you can create a .slides:hover class with flex:0 0 var(--hover-width); This will expand the hovered slide to 50%. A 1 to grow in this class isn't necessary if you never want it to be over the width of your --hover-width.
Hope this helps!
:root {
--container-bg-color: #333;
--left-bg-color: rgba(223, 39, 39, 0.7);
--left-btn-hover-color: rgba(161, 11, 11, 0.3);
--mid-bg-color: rgba(70, 223, 39, 0.7);
--mid-btn-hover-color: rgba(24, 92, 10, 0.3);
--right-bg-color: rgba(39, 186, 223, 0.7);
--right-btn-hover-color: rgba(10, 18, 92, 0.3);
--hover-width: 50%;
--other-width: 25%;
--speed: 1000ms;
}
html,
body {
padding: 0;
margin: 0;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
h2 {
font-size: 4rem;
color: #fff;
position: absolute;
left: 50%;
top: 30%;
transform: translateX(-50%);
white-space: nowrap;
}
.btn {
display: block;
position: absolute;
left: 50%;
top: 50%;
height: 2.5rem;
padding-top: 1.3rem;
width: 15rem;
text-align: center;
color: #fff;
border: #fff solid 0.2rem;
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
transform: translateX(-50%);
}
.split.left .btn:hover {
background-color: var(--left-btn-hover-color);
border-color: var(--left-btn-hover-color);
}
.split.mid .btn:hover {
background-color: var(--mid-btn-hover-color);
border-color: var(--mid-btn-hover-color);
}
.split.right .btn:hover {
background-color: var(--right-btn-hover-color);
border-color: var(--right-btn-hover-color);
}
.container {
display: flex;
width: 100%;
height: 100%;
background: var(--container-bg-color);
}
.split {
position: relative;
flex:1 0 var(--other-width);
height: 100%;
overflow: hidden;
}
.split:hover {
flex: 1 0 var(--hover-width);
}
.split.left:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--left-bg-color);
}
.split.mid:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--mid-bg-color);
}
.split.right:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--right-bg-color);
}
.split.left,
.split.mid,
.split.right,
.split.left:before,
.split.mid:before,
.split.right:before {
transition: var(--speed) all ease-in-out;
}
<div class="container">
<div class="split left">
<h2>Option1</h2>
Learn More
</div>
<div class="split mid">
<h2>Option 2</h2>
Learn More
</div>
<div class="split right">
<h2>Option 3</h2>
Learn More
</div>
</div>

Increasing CSS value instead of decreasing with jquery

I have a page that I need to convert to rtl.
The active tab & tab arrow position doesn't match.
I need to change the tab arrow position from TAB 1 to TAB 2 and vice versa.
I already changed some js value but in vain
HTML :
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-search-container">
<form class="main-search-form">
<div class="search-type">
<label class="active"><input class="first-tab" name="tab" checked="checked" type="radio">TEXT</label>
<label><input name="tab" type="radio">TEXT</label>
<label><input name="tab" type="radio">TEXT</label>
<div class="search-type-arrow"></div>
</div>
<div class="main-search-box">
<div class="main-search-input larger-input">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
CSS :
body {
direction:rtl;
color: #707070;
background-color: #cccccc;
}
.parallax {
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
z-index: 99;
}
.parallax-overlay {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 101;
background-color: #333;
opacity: 0.4;
}
.parallax-content {
position: relative;
z-index: 999;
padding: 105px 0;
}
.main-search-container {
transform: translate3d(0,-12px,0);
}
.main-search-form {
width: 660px;
display: block;
margin: 0 auto;
position: relative;
margin-top: 35px;
}
.search-type {
display: inline-block;
padding-bottom: 35px;
position: relative;
}
.search-type input[type="radio"] { display: none; }
.search-type label {
background-color: #fff;
color: #333;
cursor: pointer;
display:inline-block;
text-align: center;
padding: 9px 18px;
margin: 0 0 0 15px;
float: right;
transition: all 0.2s;
border-radius: 3px;
}
.search-type label:hover,
.search-type label.active {
background-color: #66676b;
color: #fff;
}
.search-type-arrow {
width: 0;
height: 0;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
border-bottom: 15px solid #fff;
position: absolute;
bottom: 0;
right: 0;
transform: translate3d(-3px,0,0);
}
.main-search-box {
background-color: #fff;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12);
padding: 30px;
padding-bottom: 20px;
margin-top: -9px;
border-radius: 3px;
}
.main-search-box.no-shadow {
box-shadow: none;
padding: 0;
margin: 0;
}
.search-container .main-search-input input {
font-weight: 500;
font-size: 17px;
height: 57px !important;
float: right;
box-sizing: border-box;
border: none;
float: right;
height: auto;
}
.search-container .main-search-input button.button {
width: initial;
min-width: 100px;
max-width: 100px;
margin: 0;
font-size: 18px;
position: relative;
margin-right: 20px;
flex: 0 auto;
height: 57px;
}
.search-container .main-search-input button.button i {
position: relative;
right: 2px;
}
JS :
(function($){
"use strict";
$(document).ready(function(){
function searchTypeButtons() {
// Radio attr reset
$('.search-type label.active input[type="radio"]').prop('checked',true);
// Positioning indicator arrow
var buttonWidth = $('.search-type label.active').width();
var arrowDist = $('.search-type label.active').position().left;
$('.search-type-arrow').css('right', arrowDist + (buttonWidth/2) );
$('.search-type label').on('change', function() {
$('.search-type input[type="radio"]').parent('label').removeClass('active');
$('.search-type input[type="radio"]:checked').parent('label').addClass('active');
// Positioning indicator arrow
var buttonWidth = $('.search-type label.active').width();
var arrowDist = $('.search-type label.active').position().left;
$('.search-type-arrow').css({
'right': arrowDist + (buttonWidth/2),
'transition':'right 0.4s cubic-bezier(.87,-.41,.19,1.44)'
});
});
}
// Init
if ($(".main-search-form").length){
searchTypeButtons();
$(window).on('load resize', function() { searchTypeButtons(); });
}
// ------------------ End Document ------------------ //
});
})(this.jQuery);
I'm using bootstrap, bootstrap rtl flipped & jquery 2.2.0 as external ressources.
Here's the snippet:
https://jsfiddle.net/s3hy37nd/5/
Can someone help with that?

So many errors... I can only say I tried to comment them all inside the code so... yeah it's all there:
"use strict";
jQuery(function($) { // DOM ready and $ alias secured
// Radio attr reset (on DOM ready... makes sense?)
$('.search-type label.active input[type="radio"]').prop('checked', true);
function repositionArrow() { // Use a meaningful fn name
// Positioning indicator arrow
// Width? No. You need .outerWidth! you have paddings!!
var buttonWidth = $('.search-type label.active').outerWidth();
// Again use meaningful names
// If you do console.log( $('.search-type label.active').position() );
// you'll see no `.right` property. So yeah, use .left
var posLeft = $('.search-type label.active').position().left;
$('.search-type-arrow').css({
left: posLeft + (buttonWidth / 2)
// No need for transition here - move it to Stylesheet instead
});
}
// Init
if ($(".main-search-form").length) {
// You might want this too inside the "if"
$('.search-type label').on('change', function() {
$('.search-type input[type="radio"]').parent('label').removeClass('active');
$('.search-type input[type="radio"]:checked').parent('label').addClass('active');
repositionArrow(); // Now you have such function
});
repositionArrow();
$(window).on('load resize', repositionArrow);
}
});
body {
direction: rtl;
color: #707070;
background-color: #cccccc;
}
.parallax {
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
z-index: 99;
}
.parallax-overlay {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 101;
background-color: #333;
opacity: 0.4;
}
.parallax-content {
position: relative;
z-index: 999;
padding: 105px 0;
}
.main-search-container {
transform: translate3d(0, -12px, 0);
}
.main-search-form {
width: 660px;
display: block;
margin: 0 auto;
position: relative;
margin-top: 35px;
}
.search-type {
display: inline-block;
padding-bottom: 35px;
position: relative;
}
.search-type input[type="radio"] {
display: none;
}
.search-type label {
position: relative;
/* YOU NEED SOME POSITION! */
background-color: #fff;
color: #333;
cursor: pointer;
display: inline-block;
text-align: center;
padding: 9px 18px;
margin: 0 0 0 15px;
/*float: right; WHY? you use rtl already */
transition: all 0.2s;
border-radius: 3px;
}
.search-type label:hover,
.search-type label.active {
background-color: #66676b;
color: #fff;
}
.search-type-arrow {
width: 0;
height: 0;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
border-bottom: 15px solid #fff;
position: absolute;
bottom: 0;
/*right: 0; ...Nope. See JS, we need left */
left: calc(100% - 30px);
/* calc to the rescue */
/*transform: translate3d(-3px,0,0); but why */
transition: left 0.4s cubic-bezier(.87, -.41, .19, 1.44);
/* Moved from JS */
}
.main-search-box {
background-color: #fff;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.12);
padding: 30px;
padding-bottom: 20px;
margin-top: -9px;
border-radius: 3px;
}
<div class="parallax-content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-search-container">
<form class="main-search-form">
<div class="search-type">
<label class="active"><input class="first-tab" name="tab" checked="checked" type="radio">TAB 1</label>
<label><input name="tab" type="radio">TAB 2</label>
<label><input name="tab" type="radio">TAB 3</label>
<div class="search-type-arrow"></div>
</div>
<div class="main-search-box">
<div class="main-search-input larger-input">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
Updated jsFiddle

How do I get the dots to go away? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
This is a pre made website. I am working on it, and I am okay with CSS and HTML, but I don't have much experience with Java. I think that the problem is with Java. I would really like the dots to not be there where the list items just rotate without the dots appearing below.
/*! http://responsiveslides.com v1.54 by #viljamis */
(function(c,I,B){c.fn.responsiveSlides=function(l){var a=c.extend({auto:!0,speed:500,timeout:4E3,pager:!1,nav:!1,random:!1,pause:!1,pauseControls:!0,prevText:"Previous",nextText:"Next",maxwidth:"",navContainer:"",manualControls:"",namespace:"rslides",before:c.noop,after:c.noop},l);return this.each(function(){B++;var f=c(this),s,r,t,m,p,q,n=0,e=f.children(),C=e.size(),h=parseFloat(a.speed),D=parseFloat(a.timeout),u=parseFloat(a.maxwidth),g=a.namespace,d=g+B,E=g+"_nav "+d+"_nav",v=g+"_here",j=d+"_on",
w=d+"_s",k=c("<ul class='"+g+"_tabs "+d+"_tabs' />"),x={"float":"left",position:"relative",opacity:1,zIndex:2},y={"float":"none",position:"absolute",opacity:0,zIndex:1},F=function(){var b=(document.body||document.documentElement).style,a="transition";if("string"===typeof b[a])return!0;s=["Moz","Webkit","Khtml","O","ms"];var a=a.charAt(0).toUpperCase()+a.substr(1),c;for(c=0;c<s.length;c++)if("string"===typeof b[s[c]+a])return!0;return!1}(),z=function(b){a.before(b);F?(e.removeClass(j).css(y).eq(b).addClass(j).css(x),
n=b,setTimeout(function(){a.after(b)},h)):e.stop().fadeOut(h,function(){c(this).removeClass(j).css(y).css("opacity",1)}).eq(b).fadeIn(h,function(){c(this).addClass(j).css(x);a.after(b);n=b})};a.random&&(e.sort(function(){return Math.round(Math.random())-0.5}),f.empty().append(e));e.each(function(a){this.id=w+a});f.addClass(g+" "+d);l&&l.maxwidth&&f.css("max-width",u);e.hide().css(y).eq(0).addClass(j).css(x).show();F&&e.show().css({"-webkit-transition":"opacity "+h+"ms ease-in-out","-moz-transition":"opacity "+
h+"ms ease-in-out","-o-transition":"opacity "+h+"ms ease-in-out",transition:"opacity "+h+"ms ease-in-out"});if(1<e.size()){if(D<h+100)return;if(a.pager&&!a.manualControls){var A=[];e.each(function(a){a+=1;A+="<li><a href='#' class='"+w+a+"'>"+a+"</a></li>"});k.append(A);l.navContainer?c(a.navContainer).append(k):f.after(k)}a.manualControls&&(k=c(a.manualControls),k.addClass(g+"_tabs "+d+"_tabs"));(a.pager||a.manualControls)&&k.find("li").each(function(a){c(this).addClass(w+(a+1))});if(a.pager||a.manualControls)q=
k.find("a"),r=function(a){q.closest("li").removeClass(v).eq(a).addClass(v)};a.auto&&(t=function(){p=setInterval(function(){e.stop(!0,!0);var b=n+1<C?n+1:0;(a.pager||a.manualControls)&&r(b);z(b)},D)},t());m=function(){a.auto&&(clearInterval(p),t())};a.pause&&f.hover(function(){clearInterval(p)},function(){m()});if(a.pager||a.manualControls)q.bind("click",function(b){b.preventDefault();a.pauseControls||m();b=q.index(this);n===b||c("."+j).queue("fx").length||(r(b),z(b))}).eq(0).closest("li").addClass(v),
a.pauseControls&&q.hover(function(){clearInterval(p)},function(){m()});if(a.nav){g="<a href='#' class='"+E+" prev'>"+a.prevText+"</a><a href='#' class='"+E+" next'>"+a.nextText+"</a>";l.navContainer?c(a.navContainer).append(g):f.after(g);var d=c("."+d+"_nav"),G=d.filter(".prev");d.bind("click",function(b){b.preventDefault();b=c("."+j);if(!b.queue("fx").length){var d=e.index(b);b=d-1;d=d+1<C?n+1:0;z(c(this)[0]===G[0]?b:d);if(a.pager||a.manualControls)r(c(this)[0]===G[0]?b:d);a.pauseControls||m()}});
a.pauseControls&&d.hover(function(){clearInterval(p)},function(){m()})}}if("undefined"===typeof document.body.style.maxWidth&&l.maxwidth){var H=function(){f.css("width","100%");f.width()>u&&f.css("width",u)};H();c(I).bind("resize",function(){H()})}})}})(jQuery,this,0);
#slider3,#slider4 {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
margin: 0 auto;
}
.rslides_tabs {
list-style: none;
padding: 0;
background: rgba(0,0,0,.25);
box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
-moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
font-size: 18px;
list-style: none;
margin: 0 auto 50px;
max-width: 540px;
padding: 10px 0;
text-align: center;
width: 100%;
}
.rslides_tabs li {
display: inline;
margin-right: 1px;
}
.rslides_tabs a {
width: auto;
line-height: 20px;
padding: 9px 20px;
height: auto;
background: transparent;
display: inline;
}
.rslides_tabs li:first-child {
margin-left: 0;
}
.rslides_tabs .rslides_here a {
background: rgba(255,255,255,.1);
color: #fff;
font-weight: bold;
}
.events {
list-style: none;
}
.callbacks_container {
position: relative;
width: 100%;
}
.callbacks {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.callbacks li {
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.callbacks img {
position: relative;
z-index: 1;
height: auto;
border: 0;
}
.callbacks .caption {
display: block;
position: absolute;
z-index: 2;
font-size: 20px;
text-shadow: none;
color: #fff;
left: 0;
right: 0;
padding: 10px 20px;
margin: 0;
max-width: none;
top: 10%;
text-align: center;
}
.callbacks_nav {
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 61%;
left: 0;
opacity: 0.7;
z-index: 3;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 62px;
width: 45px;
margin-top: -65px;
}
.callbacks_nav:active {
opacity: 1.0;
}
a.callbacks_nav.callbacks1_nav.prev {
background: transparent url("../images/themes.png") no-repeat 0px 0px;
left: -3.1%;
}
.callbacks_nav.next {
background: transparent url("../images/themes.png") no-repeat -46px 0px;
left: 100%;
}
#slider3-pager a,#slider4-pager a {
display: inline-block;
}
#slider3-pager span,#slider4-pager span{
}
#slider3-pager span,#slider4-pager span{
width:100px;
height:15px;
background:#fff;
display:inline-block;
border-radius:30em;
opacity:0.6;
}
#slider3-pager .rslides_here a ,#slider4-pager .rslides_here a {
background: #FFF;
border-radius:30em;
opacity:1;
}
#slider3-pager a ,#slider4-pager a {
padding: 0;
}
#slider3-pager li, #slider4-pager li{
display:inline-block;
}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li{
position: relative;
display: block;
}
<div class="banner-info">
<script src="js/responsiveslides.min.js"></script>
<script>
// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 4
$("#slider3").responsiveSlides({
auto: true,
pager: true,
nav: false,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
<div id="top" class="callbacks_container">
<ol class="rslides" id="slider3">
<li>
<div class="banner-text">
<h3>Strategic Benefits Design</h3>
<h4>
We simplify HR so you can focus on your business!</h4>
</div>
</li>
<li>
<div class="banner-text">
<h3>Strategic Benefits Design</h3>
<h4>We are committed to helping grow your business!</h4>
</div>
</li>
<li>
<div class="banner-text">
<h3>Strategic Benefits Design</h3>
<h4>We give you exactly what you need!</h4>
</div>
</li>
</ol>
</div>
</div>

You got the following code in your HTML file:
$("#slider3").responsiveSlides({
auto: true,
pager: true,
nav: false,
speed: 500,
namespace: "callbacks",
before: function () {
Change pager: true, to pager: false, and see if it works. I don't know if it will for sure, but this would be the first thing I would try after seeing the ResponsiveSlides.js website.

Why does my cursor stay in 'hover' form after mij element resized?

I am trying to make a searchbar using HTML/CSS/Jquery. Almost everything works fine, except for 1 thing: when the input field resizes, the mouse stays in hover-state, until I move the mouse. Why isn't my mouse changing to default after the element resized and how can i fix this?
HTML snippet:
$(document).ready(function () {
'use strict';
var searchClicked = false;
$('.menu').on('click', function () {
$('.menu-panel').animate({'left' : '0px'}, 'ease', 'swing');
$('.overlay').toggle();
});
$('.overlay').on('click', function () {
$('.menu-panel').animate({'left' : -$('.menu-panel').width() - 200});
$('.overlay').toggle();
});
$('.search').on('click', function (e) {
if (!searchClicked) {
$(this).animate({
'padding-right' : '180px'
}, 'ease');
$(this).css({
'background-color' : 'rgba(233, 30, 99, 1)',
'color' : '#fff'
});
$('#search-bar').animate({ 'width' : '150px'}, 'ease').focus();
searchClicked = true;
} else {
$('.search').animate({
'padding-right' : '0px'
}, 'ease');
$('#search-bar').css({ 'width' : '0px'});
$(this).delay(100).queue(function (next) {
$(this).css({
'background-color' : '#fff',
'color' : '#acacac'
});
next();
});
searchClicked = false;
}
});
});
html, body {
font-family: 'Roboto', sans-serif;
background-color: #eef2f4;
}
.left { float: left !important; }
.right { float: right !important; }
li {
list-style: none;
}
a {
text-decoration: none;
color: #212121;
}
.pink { color: rgba(233, 30, 99, 1);}
textarea:focus, input:focus{
outline: 0;
}
.wrapper {
position: relative;
width: 1280px;
margin: 0 auto;
}
.overlay{
position:absolute;
top:0px;
left:0px;
bottom:0px;
right:0px;
background-color: rgba(189,195,199, 0.5);
z-index: 98;
display: none;
}
/*============================================================*/
/*========================= HEADER BAR ========================*/
/*============================================================*/
header {
position: relative;
width: 100%;
height: 75px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
text-align: center;
}
.logo {
position: relative;
line-height: 75px;
font-size: 22px;
font-weight: 700;
color: rgba(33, 33, 33, 0.8);
}
.logo:hover { color: rgba(33, 33, 33, 0.6); }
#search-bar {
position: absolute;
top: 28px;
right: 30px;
border: none;
font-size: 16px;
border-bottom: 1px solid #fff;
background-color: rgba(233, 30, 99, 0.01);
color: #fff;
width: 0px;
z-index: 999;
}
.navlinks {
display: block;
position: absolute;
top: 0;
line-height: 75px;
width: 65px;
height: 100%;
color: #acacac;
}
.navlinks:hover { background-color: rgba(233, 30, 99, 1) !important; color: #fff !important;}
.menu {left: 0px;}
.search {right: 0px;}
#media (max-width: 1280px) {
.wrapper {
width: 100%;
}
}
#media (max-width: 290px) {
.logo { font-size: 19px; }
.navlinks { font-size: 14px}
}
/*============================================================*/
/*========================= MENU PANEL ======================*/
/*============================================================*/
.menu-panel {
position: absolute;
top: 0;
left: -300px;
width: 300px;
height: 100%;
z-index: 99;
background-color: #fff;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
#media (max-width: 320px) {
.menu-panel {
width: 210px;
}
.navlinks:hover { background-color: rgba(233, 30, 99, 1) !important; color: #fff !important;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href='http://fonts.googleapis.com/css?family=Roboto:500,100,300,700,400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<title>Poging #2</title>
</head>
<body>
<header>
<nav class="wrapper">
<ul class="left">
<li><i class="fa fa-bars fa-lg"></i></li>
</ul>
LOGO
<ul class="right">
<input type="text" id="search-bar">
</ul>
<i class="fa fa-search fa-lg"></i>
</nav>
</header>
<div class="menu-panel">
</div>
<div class="overlay"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
EDIT: made a code snippet; open search and close it again -> don't move the mouse, the mouse wont change state to default (and the :hover effect stays active, until I move the mouse)

I think this is browser dependent. In my current Firefox 38.0.1 ESR the cursor (not moved) resets to default.