Develop Reference

jQuery mouseenter and mouseleave: block child and enlarge image

My goal is as follows:
I have multiple div-elements (class = parent) that will contain images. The images should only be visibly when the user positions his mouse curser in the respective div-element. In addition, I want to enlarge the picture when the mouse curser is in the div and the picture is visible.
My idea was to create a child-element into the respective div-element. On mouseenter the child-element is set to display = 'none'. On mouseleave the child-element is set to display = 'block.
What I want to achieve is that the user can only see the parent-div when he positioned his mouse courser on the respective element. In the following code, the parent-div is green whereas the child-div is grey. So when the user moves his mouse onto one of the elements, the grey child-div should disappear and the parent div-should become visible. Therefore, the color of an element in this specific code should change from grey to green when the user positioned his mouse in the element.
I assume that I made a very basic mistake.
Thanks for your help.
$('#child_1').mouseenter(function(event) {
let target = event.target;
target.style.display = 'none';
})
.mouseleave(function(event) {
let target = event.target;
target.style.display = 'block'
});
$('#child_2').mouseenter(function(event) {
let target = event.target;
target.style.display = 'none';
})
.mouseleave(function(event) {
let target = event.target;
target.style.display = 'block'
});
$(document).ready(function() {
$("[id^=parent]").hover(function() {
$(this).addClass('transition');
}, function() {
$(this).removeClass('transition');
});
});
.transition {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
.child {
background: grey;
width: 100%;
height: 100%;
position: absolute;
box-shadow: inset 0 0 20px #fff;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
}
.parent {
background: darkolivegreen;
width: 300px;
height: 424px;
position: relative;
float: left;
margin: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent_1" class="parent">
<div id="child_1" class="child"></div>
</div>
<div id="parent_2" class="parent">
<div id="child_2" class="child"></div>
</div>

I just created this CodePen. Is this what you're looking for?
I have simplified your JavaScript so it just adds/removes an 'active' class when you roll over a parent div:
$('.img-wrapper').mouseenter(function(event) {
$(this).addClass('active');
})
$('.img-wrapper').mouseleave(function(event) {
$(this).removeClass('active');
});
The animation is dealt with in the css:
.img-wrapper {
overflow: hidden;
background: lightblue;
width: 300px;
height: 300px;
position: relative;
margin: 0 10px;
}
.img-wrapper img {
opacity: 1;
width: 100%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
transition: all .4s ease-in-out;
}
.img-wrapper.active img {
opacity: 0;
transform: translate(-50%, -50%) scale(1.25);
}

Bug animation in translate with percentage on Safari/iOS adding via JavaScript

I think I found a bug related with percentages on Safari in the animations. I would like to know if really it is a bug or a Safari custom.
Explanation of the bug:
On Safari or iOS when you start an animation with a translate with percentages, the position is wrong and the animation is shown in another place.
In the next example, the square should not move because the transform is the same and it should start with a 10% 10% "margin" of its size. The bug occurs when it is adding via JavaScript after some time (like 500 ms).
If you see the bug, you will see a jump from 0 0 to 10% 10% in Safari and iOS.
var div = document.createElement('div');
setTimeout( function(){
document.body.appendChild(div);
}, 500);
div {
background: red;
width: 200px;
height: 200px;
-webkit-transform: translate(10%, 10%);
-webkit-animation: 1s bugAnimation;
}
#-webkit-keyframes bugAnimation {
from {
-webkit-transform: translate(10%, 10%);
background: blue; /* To see the animation */
}
to {
-webkit-transform: translate(10%, 10%);
background: red; /* To see the animation */
}
}
Possible solutions:
Changing the percentage values by viewport units or another.
Obviously that options is not valid for all cases because I need the percentage but it could be a small solution for now if I know the size of the div (vw, vh, px...).
Do somebody know this bug?
Tested on Safari 10.1.1 and iOS 9.3.1 (with webview).
EDIT:
Really I need the translate2D because I am rotating a DIV in the center of the page and the size is unknown, an example:
var div = document.createElement('div');
setTimeout( function(){
document.body.appendChild(div);
}, 500);
div {
background: red;
width: 200px;
height: 200px;
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-webkit-animation: 1s bugAnimation;
-webkit-transform-origin: center center;
}
#-webkit-keyframes bugAnimation {
from {
-webkit-transform: rotate(0deg) translate(-50%, -50%);
}
to {
-webkit-transform: rotate(360deg) translate(-50%, -50%);
}
}

Ok, a workaround maybe using em instead of %
var div = document.createElement('div');
setTimeout( function(){
document.body.appendChild(div);
}, 500);
div {
background: red;
width: 200px;
height: 200px;
-webkit-animation: 1s bugAnimation forwards;
}
#-webkit-keyframes bugAnimation {
from {
-webkit-transform: translate(0, 0);
background: blue; /* To see the animation */
}
to {
-webkit-transform: translate(1.3em, 1.3em);
background: red; /* To see the animation */
}
}
Ok, please take another look at that approach. I wondered why you are using keyframed animation. Maybe the example is not representative but in this case you can just animate with a simple transition. Please take another look here:
setTimeout(function() {
document.getElementById("div").classList.add("animated");
}, 1000);
div {
background: red;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transition: transform 1s;
-moz-transition: transform 1s;
-ms-transition: transform 1s;
-o-transition: transform 1s;
transition: transform 1s;
}
.animated {
transform: translate(-50%, -50%) rotate(360deg);
}
<div id="div"></div>

Looks like a Mac Safari issue,
I removed -webkit-transform property from keyframes which fixes the jumping problem on Safari and also works fine on Chrome too. Try this code,
var div = document.createElement('div');
setTimeout( function(){
document.body.appendChild(div);
}, 500);
div {
background: red;
width: 200px;
height: 200px;
-webkit-transform: translate(10%, 10%);
-webkit-animation: 1s bugAnimation;
}
#-webkit-keyframes bugAnimation {
from {
background: blue; /* To see the animation */
}
to {
background: red; /* To see the animation */
}
}

CSS Animation Fill Mode - What have I done wrong?

I need to create a rotation animation. A click event spins an element 180° to point down. Another click event spins the same element back to 0° to point up.
I have animation-fill-mode to set to forwards to preserve the last keyframe state. But it does not appear to be working. All visual elements reset to the default state.
Any ideas what I may be doing wrong?
My Codepen: http://codepen.io/simspace-dev/pen/RrpGmP
My code:
(function() {
$('#btnb').on('click', function(e) {
return $('.box').addClass('spin-counter-clockwise');
});
$('#btnf').on('click', function(e) {
return $('.box').addClass('spin-clockwise');
});
$('.box').on('webkitAnimationEnd', function(e) {
return $(e.target).removeClass('spin-counter-clockwise').removeClass('spin-clockwise');
});
}.call(this));
.box {
background: red;
position: relative;
width: 176px;
height: 176px;
margin: 40px auto;
text-align: center;
}
.box .top {
background: green;
position: absolute;
top: 0;
width: 100%;
height: 28px;
}
.box .bottom {
background: purple;
position: absolute;
bottom: 0;
width: 100%;
height: 28px;
}
.box .caret {
color: white;
font-size: 88px;
position: absolute;
top: 42px;
left: 50px;
}
.spin-clockwise {
-moz-animation: spin 2s;
-webkit-animation: spin 2s;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.spin-counter-clockwise {
-moz-animation: spin 2s reverse;
-webkit-animation: spin 2s reverse;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
body {
text-align: center;
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Keyframes are not supported in IE9 and earlier</h2>
<div class="box">
<div class="top">top</div>
<div class="caret"><i class="fa fa-caret-square-o-up"></i>
</div>
<div class="bottom">bottom</div>
</div>
<p>
<button id="btnf">SPIN CLOCKWISE</button>
</p>
<p>
<button id="btnb">SPIN COUTNER CLOCKWISE</button>
</p>

TL;DR: (straight to the suggested solution)
If all you need is a rotation from 0° to 180° on the click of one button and back from 180° to 0° on the other then I would suggest using transitions instead of animations. Transitions by default produce the reverse effect and so there is no need to code for two different states (which makes it even better).
(function() {
$('#btnb').on('click', function(e) {
return $('.box').removeClass('spin');
});
$('#btnf').on('click', function(e) {
return $('.box').addClass('spin');
});
}.call(this));
.box {
background: red;
position: relative;
width: 176px;
height: 176px;
margin: 40px auto;
text-align: center;
transition: transform 1s linear;
/* add this to enable transition */
}
.box .top {
background: green;
position: absolute;
top: 0;
width: 100%;
height: 28px;
}
.box .bottom {
background: purple;
position: absolute;
bottom: 0;
width: 100%;
height: 28px;
}
.box .caret {
color: white;
font-size: 88px;
position: absolute;
top: 42px;
left: 50px;
}
.spin {
/* this is the only thing required for rotation (along with the JS) */
transform: rotate(180deg);
}
body {
text-align: center;
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Keyframes are not supported in IE9 and earlier</h2>
<div class="box">
<div class="top">top</div>
<div class="caret"><i class="fa fa-caret-square-o-up"></i>
</div>
<div class="bottom">bottom</div>
</div>
<p>
<button id="btnf">SPIN CLOCKWISE</button>
</p>
<p>
<button id="btnb">SPIN COUTNER CLOCKWISE</button>
</p>
If you were using animations only for learning purpose, the details provided below should still be useful to you in terms of understanding how animations work, what are the limitations because of it etc.
Chris' answer touches upon the reason for your problem but I thought the question merited a bit more detailed explanation of two things - (1) Why the element doesn't hold the state as at the last keyframe even though animation-fill-mode: forwards setting is applied (2) Why the same keyframe couldn't be used for the reverse animation (when the class with the original animation was not removed). I also wanted to suggest a different alternate to the whole thing and hence the separate answer.
Why does the element not hold the state as at the last keyframe even though fill mode is set to forwards?
This is because you are removing the class that adds the animation as soon as animation completes (inside the on('webkitAnimationEnd') event handler). Generally when animation-fill-mode is set to forwards, the UA uses the settings (or property-value pair) that are provided within last keyframe to maintain the state. But once the class is removed (and in-turn the animation settings), the UA does not keep track of (or know what) animations that were prior present on the element, their state and fill mode etc. Once animation is removed, the browser triggers a repaint and this will be performed based on classes that are present on the element as at the time of the repaint. Due to this, the element would snap back to its un-rotated state. You can read more about it in my answer here to a similar question (but not the same :)).
Why can't the same keyframe be used for the reverse animation (when the class which had the original animation was not removed)?
This again is because of how animations generally work. When any animation is added to an element, the UA maintains details about the animation's keyframes, its state etc as long as it is attached to the element. So, unless the class which added the forward (0° to 180°) animation is removed, the browser thinks that it has executed the animation to completion (as default iteration count is just 1) and so even when a class with the reverse animation is added, it does nothing. The only way to make it restart the animation in reverse direction is by removing the class with the forward animation and then adding the class with the reverse animation. You can have a look at this answer also for related reading.
Because of the aforementioned reasons, the only way to achieve what you need with animations is to create two different animations (or keyframes) for the forward and reverse animations, set them under two different classes and keep changing the classes using JavaScript. This whole process becomes tedious and is generally not necessary when all you need is a rotation from (0° to 180°) on the click of one button and back from (180° to 0°) on the other. This whole thing can be achieved using transitions and what makes this even better is the fact that transitions by default produce the reverse effect and so there is no need to code for two different states.
Further Reading:
What are the differences between Transitions and Animations
Choosing Transitions or Animations - When to use which?
If the need is to have continuous clockwise or counter-clockwise rotations with each button click (like in oMiKeY's answer) then I'd still recommend using transition with a bit of JS like in the below snippet. Let's leave animations for more complex stuff (and in specific stuff that'd happen without any triggers).
(function() {
var deg = 0;
$('#btnb').on('click', function(e) {
deg -= 180;
return $('.box').css('transform', 'rotate(' + deg + 'deg)');
});
$('#btnf').on('click', function(e) {
deg += 180;
return $('.box').css('transform', 'rotate(' + deg + 'deg)');
});
}.call(this));
.box {
background: red;
position: relative;
width: 176px;
height: 176px;
margin: 40px auto;
text-align: center;
transition: transform 1s linear; /* add this to enable transition */
}
.box .top {
background: green;
position: absolute;
top: 0;
width: 100%;
height: 28px;
}
.box .bottom {
background: purple;
position: absolute;
bottom: 0;
width: 100%;
height: 28px;
}
.box .caret {
color: white;
font-size: 88px;
position: absolute;
top: 42px;
left: 50px;
}
body {
text-align: center;
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Keyframes are not supported in IE9 and earlier</h2>
<div class="box">
<div class="top">top</div>
<div class="caret"><i class="fa fa-caret-square-o-up"></i>
</div>
<div class="bottom">bottom</div>
</div>
<p>
<button id="btnf">SPIN CLOCKWISE</button>
</p>
<p>
<button id="btnb">SPIN COUTNER CLOCKWISE</button>
</p>

So the root issue was the class with the animation was being removed.
I couldn't get it to work using the same keyframes, but what i did was create a new keyframes for counter clockwise, and then removed the opposite class when the buttons were clicked
Changes:
css
.spin-clockwise {
-moz-animation: spin 2s;
-webkit-animation: spin 2s;
}
.spin-fill-mode {
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.spin-counter-clockwise {
-moz-animation: spin-counter 2s;
-webkit-animation: spin-counter 2s;
}
#keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes spin-counter {
from {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
js:
$('#btnb').on('click', (e)->
$('.box')
.addClass('spin-counter-clockwise')
.removeClass('spin-clockwise')
)
$('#btnf').on('click', (e) ->
$('.box')
.addClass('spin-clockwise')
.removeClass('spin-counter-clockwise')
)
And add the class spin-fill-mode to box. Though you could probably just leave the fill-mode in the animation classes...
updated codepen:
http://codepen.io/anon/pen/QypvOr

I fiddled with it for a while then decided you might need two separate rotation animations.
Check out my fiddle: http://codepen.io/anon/pen/jWBmZK
(function() {
$('#btnb').on('click', function(e) {
return $('.box')
.addClass('spin-counter-clockwise')
.toggleClass('upside-down');
});
$('#btnf').on('click', function(e) {
return $('.box')
.addClass('spin-clockwise')
.toggleClass('upside-down');
});
$('.box').on('webkitAnimationEnd', function(e) {
return $(e.target).removeClass('spin-counter-clockwise').removeClass('spin-clockwise');
});
}.call(this));
.box {
background: red;
position: relative;
width: 176px;
height: 176px;
margin: 40px auto;
text-align: center;
}
.box .top {
background: green;
position: absolute;
top: 0;
width: 100%;
height: 28px;
}
.box .bottom {
background: purple;
position: absolute;
bottom: 0;
width: 100%;
height: 28px;
}
.box .caret {
color: white;
font-size: 88px;
position: absolute;
top: 42px;
left: 50px;
}
.upside-down {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.spin-clockwise.upside-down {
-moz-animation: spin 2s;
-webkit-animation: spin 2s;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.spin-counter-clockwise {
-moz-animation: spin 2s reverse;
-webkit-animation: spin 2s reverse;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.spin-clockwise {
-moz-animation: back-spin 2s;
-webkit-animation: back-spin 2s;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.spin-counter-clockwise.upside-down {
-moz-animation: back-spin 2s reverse;
-webkit-animation: back-spin 2s reverse;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes back-spin {
from {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
body {
text-align: center;
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<h2>Keyframes are not supported in IE9 and earlier</h2>
<div class="box">
<div class="top">top</div>
<div class="caret"><i class="fa fa-caret-square-o-up"></i>
</div>
<div class="bottom">bottom</div>
</div>
<p>
<button id="btnf">SPIN CLOCKWISE</button>
</p>
<p>
<button id="btnb">SPIN COUTNER CLOCKWISE</button>
</p>
</body>
</html>

How can I recreate this masking effect in CSS/JavaScript?

I'm trying to recreate the effect shown in the gif here. It's fine even to have two separate images - I don't need to recreate the greyscale/blur effect (although I can with webkit filters) - it's just the masking that I'm having trouble with.
Basically I've got a carousel slider, and as it slides left and right, the background underneath the current slide will be blurred, to make the text on top more visible. I can't manage to keep the background in the same place as the slider moves along as a mask. How can I recreate this?
edit: I've managed to figure this out: http://jsfiddle.net/9xk410wk/18/
I used CSS transforms in opposite directions:
.tile {
-webkit-transform: translate3d(-400px, 0px, 0px);
}
.blur > div {
-webkit-transform: translate3d(400px, 0px, 0px);
}
.tile:hover {
-webkit-transform: translate3d(400px, 0px, 0px);
}
.tile:hover .blur > div {
-webkit-transform: translate3d(-400px, 0px, 0px);
}

You could use a webkit grayscale filter for this:
FIDDLE (hover over the image to see the effect)
Markup
<div class="pic">
<div class="mask">SLIDER</div>
</div>
CSS
.pic {
width:288px;
height: 214px;
background: url(https://dl.dropboxusercontent.com/u/51558405/pic.png) no-repeat;
position:relative;
overflow: hidden;
}
.pic:hover .mask {
-webkit-transform: translate3d(228px, 0, 0);
background-position: 100% 0;
}
.mask {
width: 60px;
height: 214px;
position: absolute;
left:0;
top:0;
color: #fff;
background: url(https://dl.dropboxusercontent.com/u/51558405/pic.png) 0 0 no-repeat;
-webkit-transition: all 1.5s linear;
transition: all 1.5s linear;
-webkit-transform: translate3d(0, 0, 0);
-webkit-filter: grayscale(100%);
z-index:1;
}

I'm not sure exactly the issue you are running into without seeing code, but here is a crude fiddle that I created which mimics the gif:
http://jsfiddle.net/z71g26by/
I just used a CSS3 linear animation and changed the opacity of the moving panel. I just used colors, but it should work the same with a background image.
CSS:
body {
/*To hide the horizontal scroller */
overflow: hidden;
}
.container {
width: 500px;
height: 420px;
background-color:blue;
}
.panel {
width: 200px;
height: 420px;
background-color: white;
opacity: .8;
-webkit-animation: move 5s linear infinite;
}
#-webkit-keyframes move {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
HTML:
<div class="container">
<div class="panel"><p>SLIDER</p></div>
</div>
Note: This only works in webkit, but you can add the appropriate pre-fixes to get it working in other browsers.

Animate LENGTH of border-bottom

I have a navbar. On hover of any of it menu item I want to have the exact same effect of border-bottom animation as in here (See how the border or menu items at the top-left animates when you hover them.)
I tried to find similar asked questions on stackoverflow and also on google but I didn't find anything helpful.
Any help is really appreciated.

Well, it was as easy as inspecting the web with the developer tools. What they do in that page is to create an element inside the menu using the :before pseudo-element. On hover they use CSS transforms (scale) to change the length.
jsfiddle.
span
{
display: inline-block;
padding: 6px 0px 4px;
margin: 0px 8px 0px;
position: relative;
}
span:before
{
content: '';
position: absolute;
width: 100%;
height: 0px;
border-bottom: 1px solid black;
bottom: 2px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: -webkit-transform 0.2s ease-in;
transition: transform 0.2s ease-in;
}
span:hover:before
{
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}

You can't have the border a different length to the element that it surrounds. However you can achieve a similar effect using just CSS - with a pseudo element. How about something like the following:
div:after{
position:absolute;
bottom:0;
left:50%;
height:1px;
width:0%;
background-color:#444;
display:block;
content:'';
transition:0.3s;
}
div:hover:after{
left:0;
width:100%;
}
JSFiddle

Its not border-bottom, it is done using css pusedo element :before
.navigation li a::before {
position: absolute;
bottom: -1px;
left: 0;
content: "";
width: 100%;
height: 1px;
background-color: #fff;
display: block;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
transform: scaleX(0);
}
.navigation li a::before {
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
transform: scaleX(1);
}