jquery animation breaks at different screen resolution

jquery animation breaks at different screen resolution - javascript

The code below is expected to fade out the overlay and animate left property of two divs which are captions.
Well, this code works like a charm at 1920x1080. It works as well in my tablet 7inchs (where overing is replaced by tapping). And the same happens in the 1024x768 res!
But in my laptop at 1366x768 two things happen:
mg_caption moves in only for 1/3 of its width
mg_caption2 doesn't appear at all
And the same happen in following resolutions:
1280x720 (mg_caption shows only a smallest portion)
1280x768 (mg_caption shows only a smallest portion)
1360x768
How to fix that?
Many thanks in advance
$('.overlay').on('mouseenter', function() {
$(this).fadeOut('slow');
$(this).closest('.kenburns').css({
"z-index": "11000",
border: "inset 2px #000;"
});
$(this).siblings('.mg_caption').animate({
left: "400px"
}, {
duration: 400,
queue: false,
easing: 'easeOutQuad'
});
$(this).siblings('.mg_caption2').animate({
left: "0px"
}, {
duration: 500,
queue: false,
easing: 'easeOutQuad'
});
});
$('.kenburns').on('mouseleave', function() {
$(this).children('.mg_caption2').animate({
left: "-700px"
}, {
duration: 500,
queue: false,
easing: 'easeOutQuad'
});
$(this).children('.mg_caption').animate({
left: "2000px"
}, {
duration: 1000,
queue: false,
easing: 'easeOutQuad' //,
});
$(this).children('.overlay').fadeIn('slow');
});
.img-responsive {
width: 100%;
}
.kenburns {
overflow: hidden;
position: relative;
float: left;
}
.kenburns img {
transition-duration: 20s;
transform: scale(1.0);
transform-origin: 50% 50%;
}
.kenburns img:hover {
transform: scale(1.5);
transform-origin: 50% 0%;
}
.mg_caption {
position: absolute;
top: 30px;
background: rgba(100, 59, 15, 1.0);
background: #FABC59;
color: #B19D87;
background: #000;
color: #fff;
width: 300px;
height: 50px;
padding: 10px;
font-size: 1.2em;
display: block;
left: 2000px;
z-index: 12000;
}
.mg_caption2 {
position: absolute;
top: 330px;
background: rgba(100, 59, 15, 1.0);
background: #FABC59;
color: #B19D87;
background: #000;
color: #fff;
width: 600px;
height: 50px;
padding: 10px;
font-size: 1.2em;
display: block;
left: -700px;
z-index: 12000;
text-align: center;
}
.overlay {
background: rgba(100, 59, 15, 0.5);
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 0;
left: 0;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-4 no-pad">
<div class="kenburns">
<img class="img-responsive" src="<?php echo base_url( 'assets/images/WESTMINSTER_SINGLE.jpg' ) ?>" />
<div class="overlay"></div>
<div class="mg_caption">Westminster Single</div>
<div class="mg_caption2">Lorem ipsum dedicat aliquod</div>
</div>
</div>

Edit: I post a better solution which uses left property from elements whoch come from left and right property for elemenets which come from right.
This is the working code:
css:
.mg_caption{
position:absolute;
top:30px;
background: #000;
color: #fff;
width: 300px;
height:50px;
padding:10px;
font-size:1.2em;
right:-100%;
z-index:12000;
}
.mg_caption2{
position:absolute;
top:180px;
background: #000;
color: #fff;
width: 600px;
height:50px;
padding:10px;
font-size:1.2em;
left:-100%;
z-index:12000;
}
JS:
$('.overlay').on('mouseenter',function(){
$(this).fadeOut('slow');
$(this).closest('.kenburns').css({
"z-index": "11000",
border: "inset 2px #000;"
});
if (animating === true)
{
$(this).siblings('.mg_caption').animate({
right: "-30%"
}, {
duration:400,
queue:false,
easing:'easeOutQuad'
});
$(this).siblings('.mg_caption2').animate({
left:"0%"
}, {
duration:500,
queue:false,
easing:'easeOutQuad'
});
}
});
$('.kenburns').on('mouseleave', function(){
if (animating === true)
{
$(this).children('.mg_caption2').animate({
left: "-100%"
}, {
duration:500,
queue:false,
easing:'easeOutQuad'
});
$(this).children('.mg_caption').animate({
right: "-100%"
}, {
duration:1000,
queue:false,
easing:'easeOutQuad'
});
}
$(this).children('.overlay').fadeIn('slow');
});
Tank you

Related

How to make shaking animation away

I am creating a yellow hover area, when the mouse hovers around this area, event: a tab appear in exactly this hover area. But when I put the mouse there, the tab starts to appear and shaking
But I don't know how to make the shaking error go away
here is my code
$(document).ready(function () {
$('#demo').mouseleave(function(event) {
$('.tab').stop().animate({
opacity : '0.5',
marginLeft: '190px',
width:'0px'
}, 600, function() { //animation complete
$('#demo').addClass('hovered');
});
});
$('#demo').mouseover(function(event) {
$('.tab').stop().animate({
opacity : '1',
marginLeft: '0px', width:'190px'
}, 300, function() { //animation complete
$('#demo').removeClass('hovered');
});
});
});
#demo {
padding: 5px;
font-size: 18px;
text-align: center;
background-color: #555;
color: white;
border: solid 1px #666;
border-radius: 3px;
position:absolute;
margin-left: 10px;
width:190px;
height:100%;
opacity: 0.5;
background-color: yellow;
}
#demo.hovered {
backgound-color: #000;
}
.tab {
margin-left: 190px;
width: 0px;
height:100%;
opacity: 0.5;
background-color: #876;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="demo">Hover here!</button>
<div class="tab">First Panel</div>
anyone help me with this? I am a javascript beginner

Instead of firing mouseleave event on #demo, i fire mouseleave event on .tab
$(document).ready(function() {
$('.tab').mouseleave(function(event) {
$('.tab').stop().animate({
opacity: '0.5',
marginLeft: '190px',
width: '0px'
}, 600, function() { //animation complete
$('#demo').addClass('hovered');
});
});
$('#demo').mouseover(function(event) {
$('.tab').stop().animate({
opacity: '1',
marginLeft: '0px',
width: '190px'
}, 300, function() { //animation complete
$('#demo').removeClass('hovered');
});
});
});
#demo {
padding: 5px;
font-size: 18px;
text-align: center;
background-color: #555;
color: white;
border: solid 1px #666;
border-radius: 3px;
position: absolute;
margin-left: 10px;
width: 190px;
height: 100%;
opacity: 0.5;
background-color: yellow;
}
#demo.hovered {
backgound-color: #000;
}
.tab {
margin-left: 190px;
width: 0px;
height: 100%;
opacity: 0.5;
background-color: #876;
position: absolute;
}
`
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="demo">Hover here!</button>
<div class="tab">First Panel</div>

it's because you trigger the hover only on the yellow rectangle and when the tab appears you stop hover the yellow rectangle. In my solution, you need to trigger the mouseleave() event also on the .tab.
$(document).ready(function() {
$('#demo').mouseleave(function(event) {
$('.tab').mouseleave(function(event) { //add this line
$('.tab').stop().animate({
opacity: '0.5',
marginLeft: '190px',
width: '0px'
}, 600, function() { //animation complete
$('#demo').addClass('hovered');
});
}); //add this line
});
$('#demo').mouseover(function(event) {
$('.tab').stop().animate({
opacity: '1',
marginLeft: '0px',
width: '190px'
}, 300, function() { //animation complete
$('#demo').removeClass('hovered');
});
});
});
#demo {
padding: 5px;
font-size: 18px;
text-align: center;
background-color: #555;
color: white;
border: solid 1px #666;
border-radius: 3px;
position: absolute;
margin-left: 10px;
width: 190px;
height: 100%;
opacity: 0.5;
background-color: yellow;
}
#demo.hovered {
backgound-color: #000;
}
.tab {
margin-left: 190px;
width: 0px;
height: 100%;
opacity: 0.5;
background-color: #876;
position: absolute;
}
`
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="demo">Hover here!</button>
<div class="tab">First Panel</div>

Do you want any user interaction on the tab?
If not, then I would add pointer-events: none; property to your .tab class.
Then the mouseleave event won't trigger, but you wouldn't be able to use any mouse events inside your tab element.

How can I trigger the width style of a class to another?

I have these 2 objects in my HTML:
//1st object
<span class="ui-slider-handle" tabindex="0" style="left: 15.3153%;"></span>
//2nd object
<div id="waveform">
<wave style="display: block; position: relative; user-select: none; height: 50px; overflow-x: auto; overflow-y: hidden;">
<canvas></canvas>
<wave style="position: absolute; z-index: 2; left: 0px; top: 0px; bottom: 0px; overflow: hidden; width: 0px; display: block; box-sizing: border-box; border-right: 1px solid rgb(255, 255, 255);"><canvas width="350" height="50" style="width: 350px;"></canvas></wave>
</wave>
</div>
Is it possible using Javascript/jQuery connect the percentage of the "left" css attribute of the ui-slider-handle class to the width of the inner wave and triggering all the time the percentage (of the 1st object) change?
My 1st try
$(document).ready(function(){
var playlist = [{
title:"Hidden",
artist:"Miaow",
mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg",
poster: "https://i.imgur.com/sCbrzQa.png"
},{
title:"Cro Magnon Man",
artist:"The Stark Palace",
mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg",
poster: "https://i.imgur.com/lXvsuBu.png"
},{
title:"Bubble",
m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg",
poster: "https://i.imgur.com/klJKSVZ.jpg"
}];
var cssSelector = {
jPlayer: "#jquery_jplayer",
cssSelectorAncestor: ".music-player"
};
var options = {
swfPath: "http://cdnjs.cloudflare.com/ajax/libs/jplayer/2.6.4/jquery.jplayer/Jplayer.swf",
supplied: "ogv, m4v, oga, mp3",
volumechange: function(event) {
$( ".volume-level" ).slider("value", event.jPlayer.options.volume);
},
timeupdate: function(event) {
$( ".progress" ).slider("value", event.jPlayer.status.currentPercentAbsolute);
}
};
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
var PlayerData = $(cssSelector.jPlayer).data("jPlayer");
// Create the volume slider control
$( ".volume-level" ).slider({
animate: "fast",
max: 1,
range: "min",
step: 0.01,
value : $.jPlayer.prototype.options.volume,
slide: function(event, ui) {
$(cssSelector.jPlayer).jPlayer("option", "muted", false);
$(cssSelector.jPlayer).jPlayer("option", "volume", ui.value);
}
});
// Create the progress slider control
$( ".progress" ).slider({
animate: "fast",
max: 100,
range: "min",
step: 0.1,
value : 0,
slide: function(event, ui) {
var sp = PlayerData.status.seekPercent;
if(sp > 0) {
// Move the play-head to the value and factor in the seek percent.
$(cssSelector.jPlayer).jPlayer("playHead", ui.value * (100 / sp));
} else {
// Create a timeout to reset this slider to zero.
setTimeout(function() {
$( ".progress" ).slider("value", 0);
}, 0);
}
}
});
$( ".ui-slider-range" ).slider({
change: function( event, ui ) {
$('wave').css('width', ui.value)
}
});
});
*, *:before, *:after {
box-sizing: border-box;
}
html {
min-height: 100%;
}
body {
background: #eee;
font-family: "Open Sans", sans-serif;
}
.music-player {
position: relative;
width: 350px;
height: 370px;
margin: 50px auto;
box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
border-radius: 10px;
background: #222;
overflow: hidden;
z-index: 0;
}
.music-player img {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
z-index: -1;
display: block;
width: 100% !important;
height: 100% !important;
-webkit-filter: blur(2px);
filter: blur(2px);
}
.music-player .info {
width: 100%;
height: 100px;
background: #222;
background: rgba(0, 0, 0, 0.8);
text-align: center;
position: relative;
}
.music-player .info .jp-playlist li {
display: none;
}
.music-player .info .jp-playlist li a {
font-size: 30px;
font-weight: 300;
text-decoration: none;
color: #fff;
color: rgba(225, 225, 225, 0.4);
}
.music-player .info .jp-playlist li a span {
font-size: 14px;
display: block;
margin-top: 10px;
}
.music-player .info .jp-playlist li.jp-playlist-current {
display: block;
}
.music-player .info .jp-playlist li .jp-free-media, .music-player .info .jp-playlist li .jp-playlist-item-remove {
display: none;
}
.music-player .info .left, .music-player .info .right {
width: 25px;
position: absolute;
top: 30px;
left: 30px;
}
.music-player .info .right {
left: auto;
right: 30px;
}
.music-player .info [class^="icon-"] {
margin: 0 0 10px;
}
.music-player .info .center {
padding: 20px 0 0;
}
.music-player .progress, .music-player .volume-level {
width: 100%;
height: 5px;
display: block;
background: #ccc;
position: absolute;
bottom: 0px;
cursor: pointer;
border: none;
}
.music-player .progress .ui-slider-range, .music-player .volume-level .ui-slider-range {
display: block;
background: #ed553b;
height: 5px;
border-radius: 0;
}
.music-player .progress .ui-slider-handle, .music-player .volume-level .ui-slider-handle {
position: absolute;
top: -8px;
width: 8px;
height: 22px;
background: url("//i.imgur.com/tsqwz1N.png") no-repeat center;
border: none;
outline: none;
margin: 0 0 0 -3px;
cursor: move;
}
.music-player .controls {
text-align: center;
width: 100%;
height: 190px;
background: #982e4b;
background: rgba(152, 46, 75, 0.6);
}
.music-player .controls .current {
font-size: 48px;
color: #fff;
color: rgba(225, 225, 225, 0.4);
padding: 15px 0 20px;
}
.music-player .controls .play-controls a {
display: inline-block;
width: 35px;
height: 40px;
margin: 0 30px;
}
.music-player .controls .volume-level {
position: relative;
bottom: auto;
width: 200px;
height: 2px;
margin: 30px auto 0;
background: rgba(225, 225, 225, 0.3);
}
.music-player .controls .volume-level .ui-slider-range {
height: 2px;
}
.music-player .controls .volume-level .ui-slider-handle {
top: -8px;
margin-left: -9px;
width: 22px;
height: 22px;
background-image: url("http://image.flaticon.com/icons/svg/106/106874.svg");
}
.music-player .controls .volume-level .icon-volume-up, .music-player .controls .volume-level .icon-volume-down {
position: absolute;
right: -34px;
top: -8px;
width: 22px;
}
.music-player .controls .volume-level .icon-volume-down {
right: auto;
left: -27px;
}
[class^="icon-"] {
width: 18px;
height: 18px;
background: url("//i.imgur.com/E09T8tf.png") no-repeat center;
display: block;
}
.icon-shuffle {
background-image: url("http://image.flaticon.com/icons/svg/148/148739.svg");
}
.icon-heart {
background-image: url("http://image.flaticon.com/icons/svg/126/126499.svg");
}
.icon-repeat {
background-image: url("http://image.flaticon.com/icons/svg/137/137485.svg");
}
.icon-share {
background-image: url("http://image.flaticon.com/icons/svg/189/189676.svg");
}
.icon-previous {
background-image: url("http://image.flaticon.com/icons/svg/137/137518.svg");
}
.icon-play {
background-image: url("http://image.flaticon.com/icons/svg/148/148744.svg");
}
.icon-pause {
background-image: url("http://image.flaticon.com/icons/svg/189/189639.svg");
}
.icon-next {
background-image: url("http://image.flaticon.com/icons/svg/137/137517.svg");
}
.icon-volume-up {
background-image: url("http://image.flaticon.com/icons/svg/149/149139.svg");
}
.icon-volume-down {
background-image: url("http://image.flaticon.com/icons/svg/109/109699.svg");
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jplayer/2.6.4/jquery.jplayer/jquery.jplayer.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jplayer/2.6.4/add-on/jplayer.playlist.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.0.52/wavesurfer.min.js"></script>
</head>
<div class="music-player">
<div style="background-image: url(https://image.freepik.com/free-vector/welcome-summer-badge-on-blurry-background_23-2147511412.jpg);" class="album"></div>
<div class="info">
<div class="left">
</div>
<div class="center">
<div class="jp-playlist">
<ul>
<li></li>
</ul>
</div>
</div>
<div class="right">
</div>
<div class="progress"></div>
</div>
<div class="demo">
<div id="waveform">
</div>
<script>
var ctx = document.createElement('canvas').getContext('2d');
var linGrad = ctx.createLinearGradient(0, 64, 0, 200);
linGrad.addColorStop(0.5, 'rgba(255, 255, 255, 1.000)');
linGrad.addColorStop(0.5, 'rgba(183, 183, 183, 1.000)');
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: linGrad,
progressColor: 'hsla(200, 100%, 30%, 0.5)',
cursorColor: '#fff',
normalize: true,
backend: 'MediaElement',
height:50,
barWidth: 3
});
//Set peaks
wavesurfer.backend.peaks = [0.0218, 0.0183, 0.0165, 0.0198, 0.2137, 0.2888, 0.2313, 0.15, 0.2542, 0.2538, 0.2358, 0.1195, 0.1591, 0.2599, 0.2742, 0.1447, 0.2328, 0.1878, 0.1988, 0.1645, 0.1218, 0.2005, 0.2828, 0.2051, 0.1664, 0.1181, 0.1621, 0.2966, 0.189, 0.246, 0.2445, 0.1621, 0.1618, 0.189, 0.2354, 0.1561, 0.1638, 0.2799, 0.0923, 0.1659, 0.1675, 0.1268, 0.0984, 0.0997, 0.1248, 0.1495, 0.1431, 0.1236, 0.1755, 0.1183, 0.1349, 0.1018, 0.1109, 0.1833, 0.1813, 0.1422, 0.0961, 0.1191, 0.0791, 0.0631, 0.0315, 0.0157, 0.0166, 0.0108];
//Draw peaks
wavesurfer.drawBuffer();
</script>
</div>
<div class="controls">
<div class="current jp-current-time">00:00</div>
<div class="play-controls">
</div>
<div class="volume-level">
</div>
</div>
<div id="jquery_jplayer" class="jp-jplayer"></div>
</div>
UPDATE
The code above creates 2 different slider selector, also the slider affect the width of the wave object. Instead of I need something like this:

I am assuming you're using the UI Slider from jQuery. Once you initialise it, you can use the change event as follows:
$( ".ui-slider-handle" ).slider({
change: function( event, ui ) {
$('wave').first().next().css('width', ui.value)
}
});
Edit: I just realised you wanted the second wave so I added .next()

What you are looking for is MutationObserver(). It allows you to register any change in element's attribute and act on it.
Be sure to check browser support, as it is very likely that it does not include what you actually need.

Hover function repeating whenever you move mouse inside selector

I have an animation that fires on hover inside certain divs. When the mouse is in the div, moving it to a different location in the div causes the hover effect to trigger again. I've tried using mouseenter/mouseleave and that does the same thing.
How can I make the function only trigger on mouseenter and mouseleave and not whenever it moves inside the selector?
DEMO
$('#nav, #footer, #leftNav, #rightNav').hover(function() {
$('#navFill').animate({
left: 0
}, 300);
$('#footerFill').animate({
left: 0
}, 300);
$('#leftNavFill').animate({
top: 0
}, 300);
$('#rightNavFill').animate({
top: 0
}, 300);
}, function() {
$('#navFill').animate({
left: '-100vw'
}, 300);
$('#footerFill').animate({
left: '100vw'
}, 300);
$('#leftNavFill').animate({
top: '100vh'
}, 300);
$('#rightNavFill').animate({
top: '-100vh'
}, 300);
});

According to your code you are calling both the animation at the same hover event, or lets say you are trying to animate it at the same mouseenter and mouseleave event. Instead of it try something like this.
$('#nav, #footer, #leftNav, #rightNav').mouseenter(function() {
console.log("mouseenter");
$('#navFill').animate({
left: 0
}, 300);
$('#footerFill').animate({
left: 0
}, 300);
$('#leftNavFill').animate({
top: 0
}, 300);
$('#rightNavFill').animate({
top: 0
}, 300);
});
$('#navFill, #footerFill, #leftNavFill, #rightNavFill').mouseleave(function() {
console.log("mouseleave");
$('#navFill').animate({
left: '-100vw'
}, 300);
$('#footerFill').animate({
left: '100vw'
}, 300);
$('#leftNavFill').animate({
top: '100vh'
}, 300);
$('#rightNavFill').animate({
top: '-100vh'
}, 300);
});
#nav {
background-color: rgba(86, 55, 144, 0.95);
width: 100vw;
height: 7.5vh;
z-index: 10;
box-shadow: 0px 2px 3px #000;
position: fixed;
}
#navBars {
position: absolute;
left: 5vw;
transform: scaleY(.75);
line-height: 7.5vh;
cursor: pointer;
color: #f0f0f0;
}
#navigation {
margin-left: 10vw;
}
.navigation {
display: inline;
position: relative;
left: -3vw;
margin-left: 3vw;
font-family: 'Josefin Sans', sans-serif;
font-weight: 700;
font-size: 28px;
line-height: 7.5vh;
cursor: pointer;
color: #f0f0f0;
}
#leftNav {
height: 100vh;
width: 2vw;
background-color: rgba(86, 55, 144, 1);
position: fixed;
z-index: 11;
box-shadow: 2px 0px 3px #000;
}
#rightNav {
height: 100vh;
width: 2vw;
left: 98vw;
background-color: rgba(86, 55, 144, 1);
position: fixed;
z-index: 11;
box-shadow: -2px 0px 3px #000;
}
#footer {
background-color: rgba(86, 55, 144, 0.95);
width: 100vw;
height: 5vh;
top: 95vh;
z-index: 10;
box-shadow: 0px -2px 3px #000;
position: fixed;
}
#navFill {
background-color: rgba(240, 240, 240, .95);
width: 100vw;
left: -100vw;
height: 7.5vh;
z-index: 10;
position: fixed;
}
#footerFill {
background-color: rgba(240, 240, 240, .95);
width: 100vw;
left: 100vw;
top: 95vh;
height: 5vh;
z-index: 10;
position: fixed;
}
#leftNavFill {
height: 100vh;
width: 2vw;
background-color: rgba(240, 240, 240, 1);
top: 100vh;
position: fixed;
z-index: 11;
box-shadow: 2px 0px 3px #000;
}
#rightNavFill {
height: 100vh;
width: 2vw;
left: 98vw;
background-color: rgba(240, 240, 240, 1);
top: -100vh;
position: fixed;
z-index: 12;
box-shadow: 2px 0px 3px #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav">
<i class="fa fa-bars fa-3x" id="navBars"></i>
<ul id="navigation">
<li id="homeNav" class="navigation">Home</li>
<li id="aboutNav" class="navigation">About</li>
<li id="portNav" class="navigation">Portfolio</li>
<li id="contactNav" class="navigation">Contact</li>
</ul>
</nav>
<div id="leftNav"></div>
<div id="rightNav"></div>
<footer id="footer">
</footer>
<div id="leftNavFill"></div>
<div id="rightNavFill"></div>
<div id="navFill"></div>
<div id="footerFill"></div>
Here is the Updated Fiddle
And also as soon as the mouse enters the div you are animating navFill and others which are not the same divisions to which the mousenter event is binded. So the mouseleave event executes at the same time because of the animation which cause the div to animate and thus the mouseleave event executes.

I think the problem lies with your animated DIVs (i.e. #navFill, #leftNavFill, #rightNavFill, and #footerFill) being above your non-animated DIVs (i.e. #nav, #leftNav, #rightNav, and #footer). When an animated DIV gets animated, it repaints the non-animated DIV below it causing it to trigger the mouseenter/mouseleave event. Maybe in simple terms, as soon as the grey bar covers the purple area and the mouse, you just left the purple area (which causes the mouseleave event). And vice-versa, when the grey bar uncovers the purple area.
So, the problem came down to how do I make the animated DIVs appear above the non-animated DIVs without them being selectable? You can attach the CSS property pointer-events: none to your animated DIVs.
Demo

The animation might cause the whole nav to shrink, because of this, the navigation consider the mouse "just enter" into the nav.

JS Slide toogle sidebars out and expand content div

I want to slide out my both sidebars and expand the width of my middle content div but at the same time and on a again click I want to toogle it back to original.
What I tried so far
$('.headbar').click(function () {
$(".leftside").animate({width: 'toggle'});
$( ".rightside" ).animate({
width: "toggle"
}, 300, function() {
$(".content").animate({width: '1200px'});
});
});
My Problems
headbar is flashing when animation start (but guess its CSS bug)
content is not toggle back to original
My Concept for understanding

I would approach this using a CSS class transition effect toggled by jQuery instead of using jQuery animate function.
Working Demo:
$(document).ready(function() {
$('body').on('click', '.headbar', function(){
$('body').toggleClass('expanded');
});
});
.headbar {
width: 100%;
background: #303030;
background-repeat: repeat;
background-size: 38px 133px;
height: 40px;
background-position: 0px 39px;
box-shadow: 0px 1px 5px;
position: fixed;
z-index: 1000;
margin-top: -40px;
}
.leftside {
position: fixed;
left: 2%;
top: 100px;
height: 500px;
width: 13%;
background-color: rgba(123, 123, 123, 0.95);
}
.rightside {
position: fixed;
right: 2%;
top: 100px;
height: 500px;
width: 13%;
background-color: rgba(123, 123, 123, 0.95);
}
.scrollable {
position: relative;
top: 20px;
min-height: 700px;
width: 70%;
margin: 0 auto;
box-shadow: 0px 1px 5px;
background: white;
}
/* ===================== */
/* expanded transition
/* ===================== */
.leftside, .rightside, .scrollable {
transition:0.3s;
}
body.expanded .scrollable {
width:100%;
}
body.expanded .leftside {
left: -100%;
}
body.expanded .rightside {
right: -100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="headbar"></div>
<div class="leftside"></div>
<div class="rightside"></div>
<div class="scrollable"></div>
jsFiddle

Hovering over an element causes it to animate rather just change its CSS properties

In the code that I have on this URL:
http://jsfiddle.net/y5nqyucs/8/
div#column {
top:0px;
bottom: 0px;
position: fixed;
border: 1px solid greenyellow;
display: block;
overflow: hidden;
width: 296px;
box-shadow: 0px 0px 3px 4px black;
}
div.background {
background: black;
opacity: .75;
position: absolute;
top: 0px;
bottom: 0px;
left:0px;
right: 0px;
z-index: -1;
}
#carousel {
border: 1px solid cyan;
margin: 35px auto 0px;
position: relative;
top: 0px;
padding:0px;
background: #000;
}
#carousel .carouselunit {
display: block;
border: 1px solid burlywood;
position: relative;
height: 200px;
width: auto;
}
#carousel .carouselunit .flipcard {
border: 1px dashed pink;
transform-style: preserve-3d;
}
#carousel .carouselunit .flipcard img {
top: 0px;
left: 0px;
border: 1px solid yellow;
transform: translateZ(1px);
}
#carousel .carouselunit .flipcard .backpane {
display: inline;
border: 2px solid gray;
height: 200px;
position: absolute;
transform: translateZ(0px) rotateY(180deg);
color: #fff;
background: rgb(0,0,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(53,57,58,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(53,57,58,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(53,57,58,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(53,57,58,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(53,57,58,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(53,57,58,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#35393a',GradientType=0 ); /* IE6-9 */
top: 0px;
left: 0px;
}
.backpane p,
.backpane a {
margin: 1em;
}
div.up {
position: absolute;
width: 100%;
top: 0px;
height: 35px;
z-index: 2;
background: #484848;
text-align: center;
}
div.up:hover {
background-color: #aaa;
}
div.down {
position: absolute;
width: 100%;
bottom: 0px;
height: 35px;
z-index: 2;
background: #484848;
text-align: center;
}
div.down:hover {
background-color: #aaa;
}
<body>
<div id="column">
<div class="up">
<img src="./resources/images/up.png" alt="up arrow"/>
</div>
<div id="carousel">
<div class="carouselunit">
<div class="flipcard">
<img src="./resources/images/one.png" height="200"/>
<div class="backpane">
<p> Some example text, some example text, some example text... </p>
Done...
Link
</div>
</div>
</div>
<div class="carouselunit">
<div class="flipcard">
<img src="./resources/images/two.png" height="200"/>
<div class="backpane">
<p> Some example text, some example text, some example text... </p>
Done...
</div>
</div>
</div>
<div class="carouselunit">
<div class="flipcard">
<img src="./resources/images/three.png" height="200"/>
<div class="backpane">
<p> Some example text, some example text, some example text... </p>
Done...
</div>
</div>
</div>
<div class="carouselunit">
<div class="flipcard">
<img src="./resources/images/four.png" height="200"/>
<div class="backpane">
<p> Some example text, some example text, some example text... </p>
Done...
</div>
</div>
</div>
<div class="carouselunit">
<div class="flipcard">
<img src="./resources/images/five.png" height="200"/>
<div class="backpane">
<p> Some example text, some example text, some example text... </p>
Done...
</div>
</div>
</div>
</div>
<div class="down">
<img src="./resources/images/down.png" alt="down arrow"/>
</div>
<div class="background"></div>
</div>
<!-- End Carousel -->
</body>
$(document).ready(function(){
var right = $(window).width()/2+629/2;
$("#column").css({
right: right
});
var scrollDifference;
var justScrolled = false;
$(".up").click(function(){
scrollDifference = $("#carousel").height() - $("#column").height();
if((scrollDifference > 0) && ($("#carousel").position().top < 0)){
$(".flipcard").css({
position: "static",
transform: "rotateY(0deg)",
transitionDuration: "1s",
height: "200px",
zIndex: "1"
});
$(".flipcard > img").css({
height: "200px",
width: "295px"
});
$("#carousel").animate({
top: "+=200"
}, 150, function(){
});
}
$("div").removeClass(".hoverNowFixed");
justScrolled = true;
});
$(".down").click(function(){
scrollDifference = $("#carousel").height() - $("#column").height();
if((scrollDifference > 0) && ($("#carousel").position().top === -scrollDifference) || ($("#carousel").position().top > -scrollDifference)){
$(".flipcard").css({
position: "static",
transform: "rotateY(0deg)",
transitionDuration: "1s",
height: "200px",
zIndex: "1"
});
$(".flipcard > img").css({
height: "200px",
width: "295px"
});
$("#carousel").animate({
top: "-=200"
}, 150, function(){
$("#carousel").stop();
});
$("div").removeClass(".hoverNowFixed");
justScrolled = true;
}
});
$("#carousel .carouselunit .flipcard").hover(
function(){
if($(this).hasClass(".selected")){
}
if(!$(this).hasClass(".selected")) {
var verticalPosition = $(this).offset().top - 25;
var horizontalPosition = $(this).offset().left - 25;
if(justScrolled){
console.log('up/down button was hit and now flipcard is hovered on');
$(this).addClass("hoverNowFixed");
$(this).css({
position: "fixed",
zIndex: "2",
top: verticalPosition,
left: horizontalPosition,
height: "230px",
width: "340px"
});
$(this).children("img", ".backpane").css({
top: verticalPosition,
left: horizontalPosition,
height: "230px",
width: "340px"
});
console.log(verticalPosition);
console.log(horizontalPosition);
}
if(!justScrolled) {
console.log('flipcard is hovered on');
$(this).addClass("hoverNowFixed");
$(this).css({
position: "fixed",
zIndex: "2",
top: verticalPosition,
left: horizontalPosition,
height: "230px",
width: "340px"
});
$(this).children("img", ".backpane").css({
top: verticalPosition,
left: horizontalPosition,
height: "230px",
width: "340px"
});
console.log(verticalPosition);
console.log(horizontalPosition);
}
}
},
function(){
if($(this).hasClass(".selected")) {
}
if(!$(this).hasClass(".selected") && $(this).css("position") === "fixed") {
var verticalPosition = $(this).offset().top + 25;
var horizontalPosition = $(this).offset().left + 25;
console.log(verticalPosition);
console.log(horizontalPosition);
$(this).css({
position: "fixed",
zIndex: "1",
top: verticalPosition,
left: horizontalPosition,
height: "200",
width: "295"
});
$(this).children("img", ".backpane").css({
top: verticalPosition,
left: horizontalPosition,
height: "200",
width: "295"
});
$(this).children(".backpane").css({
position: "absolute"
});
}
if(!$(this).hasClass(".selected") && $(this).css("position") === "static") {
var verticalPosition = $(this).offset().top + 25;
var horizontalPosition = $(this).offset().left + 25;
console.log(verticalPosition);
console.log(horizontalPosition);
$(this).css({
position: "fixed",
zIndex: "1",
top: verticalPosition,
left: horizontalPosition,
height: "200",
width: "295"
});
$(this).children("img", ".backpane").css({
top: verticalPosition,
left: horizontalPosition,
height: "200",
width: "295"
});
$(this).children(".backpane").css({
position: "absolute"
});
}
});
$("#carousel .carouselunit .flipcard").click(function(){
if($(".selected").length === 0){
$(this).addClass("selected");
$(this).animate({
top: "250px",
left: "700px"
}, 110, function(){
$(this).animate({
width: "700px",
height: "450px"
}, 250);
$(this).css({
position: "fixed",
transform: "rotateY(180deg)",
transitionDuration: "250"
});
});
$(this).children(".backpane").animate({
width: "700px",
height: "450px"
});
}
else {
$(".flipcard.selected").css({
position: "absolute",
top: "0px",
left: "0px"
});
$(".flipcard.selected img", ".flipcard.selected .backpane").css({
width: "295px",
height: "200px"
});
$(".selected").removeClass("selected");
$(this).css({
position: "fixed"
});
$(this).animate({
top: "250px",
left: "700px"
},250);
$(this).css({
transform: "rotateY(180deg)",
transitionDuration: "1s"
});
setTimeout(function(){$(this).addClass("selected");},100);
}
});
});
I have several boxes with an image inside them which are in between two gray boxes, one gray box is at the top, the other at the bottom.
Hovering over the image boxes makes it slightly larger and hovering off makes it go back to the original size. Once I click on the bottom gray box below it (which acts as a scroller to see more boxes below the viewport), and then hover over any of the image boxes again; it "animates" into a bigger box instead. If I keep hovering over a flipcard element it animates so that it keeps going in the bottom right direction. These are two undesirable effects happening.
I want it (flipcard) to not "animate" into a bigger box and smaller box, I just want the CSS change to make it go bigger and go back to its original size instantly and go back into its place within the respective parent (carouselunit) like it did before I clicked on the bottom gray box.

You're changing the property. What are you trying to accomplish here:
transform: "rotateY(0deg)",
transitionDuration: "1s",

Develop Reference

JavaScript is the programming language of the Web.

jquery animation breaks at different screen resolution - javascript

Related

How to make shaking animation away

How can I trigger the width style of a class to another?

Hover function repeating whenever you move mouse inside selector

JS Slide toogle sidebars out and expand content div

Hovering over an element causes it to animate rather just change its CSS properties

Categories

Resources