Develop Reference

Jumping of animation on empty space

HTML:
<div class="wrap">
<span class="button"></span>
<div class="element"></div>
</div>
JS:
$('.button').on('mouseenter', function () {
$('.element').addClass('active');
}).on('mouseleave', function () {
$('.element').removeClass('active');
});
$('.element').on('mouseenter', function () {
$('.element').addClass('active');
}).on('mouseleave', function () {
$('.element').removeClass('active');
});
http://jsfiddle.net/e4p98cwb/1/
When you hover on the black element the blue one enters the screen. After that if you hover for a sec on empty space the blue one starts to escape the screen, but if you hover fast on the empty space that it occupied before two things might happen:
1. The blue one returns fully shown on screen
or
2. Jumps once or twice and proceeds to leave the screen
The same happens on hover and mouseover events as well. Why is this happening and is there a way around this behavior ?

The easiest way to get around any issues with JS is to just let CSS take care of it. If you add this to the :hover state it will work:
.button:hover + .element,
.element:hover {
-webkit-transform: translateX(0);
transform: translateX(0);
}
See below for an implementation. This saves you a ton of JS as well.
.wrap {
position: relative;
width: 600px;
height: 600px;
overflow: hidden;
border: 2px solid red;
}
.button{
width: 100px;
height: 50px;
display: block;
background: #333;
}
.element {
position: absolute;
top: 0;
right: 0;
z-index: 99999;
width: 500px;
height: 630px;
background: blue;
-webkit-transform: translateX(630px);
transform: translateX(630px);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.button:hover + .element,
.element:hover {
-webkit-transform: translateX(0);
transform: translateX(0);
}
<div class="wrap">
<span class="button"></span>
<div class="element"></div>
</div>
Update
The reason this is happening is because the element itself is still occupying the same space. This has to do with translation not actually moving the element, but transforming it. Once you move your cursor off any of the activatable elements, it will retract, but as it's animating it still occupies that same space, making it possible to hover on that space and retrigger the animation. I believe it's because this transform is only fully applied after completing the animation. Let's test this theory:
.wrap {
position: relative;
width: 600px;
height: 600px;
overflow: hidden;
border: 2px solid red;
}
.button{
width: 100px;
height: 50px;
display: block;
background: #333;
}
.element {
position: absolute;
top: 0;
right: 0;
z-index: 99999;
width: 500px;
height: 630px;
background: blue;
right: -100%;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.button:hover + .element,
.element:hover {
right: 0;
}
<div class="wrap">
<span class="button"></span>
<div class="element"></div>
</div>
In this one we are simply using absolute positioning and the issue goes away, meaning that the tranform is actually causing the element to still occupy the same space. Until animation concludes.

Div turns black on hover

So I want this div to fade another div that has a black background at 0.5 opacity over it. But when i hover it ignores the image already in the div and fills a black then fades the other div. so it goes Image --> Solid black div --> then fades my second div.
https://jsfiddle.net/70e890e6/
HTML:
<div class="box1">
<div class="img_hover_effect"></div>
<img src="images/portfolio/charity.png" class="box1_img">
<img src="images/portfolio/charity/2.png" class="box1_img2">
</div>
CSS:
.img.img_hover_effect {
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
JQuery:
$(document).ready(function(){
$('.box1').on('mouseenter', function() {
$('.img_hover_effect').fadeIn(1000);
});
});

You can use jQuery hover like this :
$('.box1').hover(function() {
$('.hover').fadeIn(1000);
}, function(){
$('.hover').fadeOut(1000);
});
and some css changes :
.box1 {
position:relative;
height: 400px;
width: 350px;
margin: 0 auto;
margin-top: 100px;
float: left;
overflow: hidden;
}
.tree {
height: 100%;
width: auto;
display: block;
position: relative;
}
.hover {
position:absolute;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
display: none;
z-index: 10;
}
JSFIDDLE : https://jsfiddle.net/70e890e6/4/

You could use a CSS pseudo-class for the desired hover effect. I'd recommend applying the class directly to the images you wish to have the hover effect rather than overlaying with another div.
.hover-effect:hover{
background-color: #000000; //or whatever colour fade you are looking for
opacity: 0.5;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

Move div when hovering another div with jquery

When I hover a div at the bottom, which only is shown a little bit, (div has width:100%;), I want this div to move up with a mouseovereffect, and the same time push the logo, which is in the center of the screen, upwards. I want to use jQuery, because nothing else works. When the mouse is off the div, I want the div to fall back down to hiding. They are two div's inside the body.
Here is parts of the html and css: code
I hope someone knows how to make a javascript to make this hover function where hovering a div moves another div, then goes back to normal.

Does this help
using the jquery animate you can animate the movement of divs easily..
<div id="box1"></div>
<div id="box2"></div>
<style type="text/css">
#box1
{
width: 100px;
height: 100px;
background-color: red;
}
#box2
{
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 10px;
}
</style>
<script type="text/javascript">
$("#box1").hover(function(){
//alert("hover");
$("#box2").animate({marginLeft: "200"});
});
$("#box1").mouseleave(function(){
$("#box2").animate({marginLeft: "0"});
});
</script>

There are few changes which need to be made in your code,
1) You have given class boks1 in jquery , but such class does not exist in your code.
2)you can combine both mouseover and mouseout in hover function itself.
Jquery
$(document).ready(function () {
$(".box1").hover(function () { // on hover
$(".box").css("margin-top", "-20px");
},function() {//on mouseout
$(".box").css("margin-top", "20px");
});
});

Something like this should work (if I understand your question).
I only changed the jQuery and one line of the CSS (the last line in .box was changed to transition: background 0.4s 0.5s, margin 0.4s;).
$(document).ready(function () {
$(".textarea").hover(
function () {
$(this).height($(this).height() + 200);
$(".box").css("margin-top", "-200px");
},
function () {
$(this).height($(this).height() - 200);
$(".box").css("margin-top", "");
}
);
});
#charset "UTF-8";
/* CSS Document */
html {
background: url(bilder/backnormal.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
margin: 0;
padding: 0;
}
.textarea {
background: rgba(255,255,255,0.5);
width: 100%;
float: left;
position: relative;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.box1, .box2 {
color: #666;
height: 57%;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
text-align: left;
padding-left: 350px;
transition: background-color 0.5s ease-in-out;
float: left;
}
.box1:hover, .box2:hover {
background: rgba(255,255,255,0.2);
transition: background-color 0.5s ease-in-out;
}
/*________*/
.box {
width: 300px;
height: 400px;
position: relative;
background: rgba(255,255,255,0);
display: inline-block;
float: left;
margin-top: 10%;
margin-bottom: 10%;
margin-left: 35%;
margin-right: 35%;
cursor: default;
text-align: center;
-webkit-transition: background 0.4s 0.5s;
transition: background 0.4s 0.5s, margin 0.4s;
}
.box:hover {
background: rgba(255,255,255,0.2);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.logo {
width: 90%;
padding-top: 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="menu">
</div>
<div class="box">
<img src="bilder/logouten.png" class="logo" />
</div>
<div class="textarea">
<div class="box1">
<h1>hello</h1>
<p>textexttextextextextexttextextxtxtexetxtextextextetex</p>
</div>
<div class="box2">
<h1>hello again</h1>
<ul>
<li>textext</li>
<li>haethaethaethaefgae</li>
<li>wordswordswords</li>
</ul>
</div>
</div>
<footer>
</footer>
</body>
</html>

Here is my solution:
$(".textarea").hover(
function () {
$('.textarea, .box').stop().animate({top: '-200px'});
}, function (){
$('.textarea, .box').stop().animate({top: '0'});
});
see Fiddle
For your information: Your code did not work because of typo in your jQuery selectors. I also mentions that you are using float left a certain time that makes no sense because you overrule it with other styles.
I'm animating the top position because the margin will not do the right thing. When using margin the animation stops when there is no space.
I'm trigger the hover on the texarea becaus it covers the hole width. When using the .box itselfe then you will loose the focus during the hover effect. This will end up in a jumping effect.
I also us the stop function to clear the quehe otherwhise every hover event will be stored an triggerd (makes also an jumping effect)
So my snippet may give you an idea of how to achieve your needs.

How to control the hover effect in CSS3?

In the example below I will show you a sample of what I have right now and you will notice when you hover over the black box a transition occurs and slides in my tooltip. My problem is that I want that tooltip to only appear when I hover over the black box. In the example you will notice if you hover over the black or anywhere within 180px right of the black box the transition still occurs( this is because my graphic is 180px wide)! I want to restrict the hover effect to only the black box! Please help!
HTML
<div id="sidemenu">
<div id="regionsContainer">
<div id="regionsUnitedStates">
<div id="regionsUnitedStatesTooltip"></div>
</div>
</div>
</div>
CSS
#sidemenu {
width: 60px;
height: 100%;
min-width: 60px;
height: 100vh;
max-width: 60px;
background-color: #383D3F;
background-size: 100% 100%;
background-attachment: fixed;
position: absolute;
left:-60px;
transition: left ease-in-out 0.5s;
}
#sidemenu.show {
left: 0;
}
#regionsContainer {
width: 60px;
height: 481px;
min-height: 481px;
min-width: 60px;
max-width: 60px;
max-height: 481px;
background-color: #383D3F;
position: relative;
top: 25%;
bottom: 25%;
}
#regionsUnitedStates {
width: 60px;
height: 60px;
background: #000;
}
#regionsUnitedStatesTooltip {
opacity:0;
background: #555;
height:60px;
width:180px;
left:100px;
position:absolute;
transition:all ease-in-out 0.25s;
top:0;
}
#regionsUnitedStates:hover #regionsUnitedStatesTooltip{
left: 60px;
opacity:1;
}
Example:
JSFIDDLE

Best way I can see is to make it so you can't hover over the tooltip when it's not visible.
I achieved this by setting it initially to height: 0. Here's the changes
#regionsUnitedStatesTooltip {
height: 0;
transition: opacity ease-in-out 0.25s, left ease-in-out 0.25s;
}
#regionsUnitedStates:hover #regionsUnitedStatesTooltip{
height: 60px;
}
Demo ~ http://jsfiddle.net/pTMCP/3/
Update
Even simpler, add these two lines...
#regionsUnitedStatesTooltip {
visibility: hidden; /* add this */
}
#regionsUnitedStates:hover #regionsUnitedStatesTooltip{
visibility: visible; /* and this */
}
Demo ~ http://jsfiddle.net/pTMCP/5/

fadeOut() applying only to first :before pseudo-element

I'm in a tricky situation -- I'm trying to build a sort of realistic flyer, with clickable paper strips at the bottom. Just for a visual reference, something like this: http://static.someecards.com/someecards/images/feed_assets/4d657f7fa4817.jpg
I built the body of the flyer with an empty div, and I absolutely positioned the "paper strips" at the bottom of this div. Then, since I'll want to add a "torn paper" border-image at the bottom of the flyer body, I gave the strips a negative z-index.
Then, in order to cover the torn-paper-border, I positioned an empty, transparent div on the top of them, with a solid-coloured pseudo element that will disappear once the CSS3 animation will be triggered (via JS).
<div class="flyer-body">
<div class="strip"></div> <!-- this will be animated via CSS3 -->
<div class="strip-wrapper"></div> <!-- this is a clone of the "strip" div, but transparent (made for z-index problems with animations). a click on this div will trigger the animation -->
</div><!-- end flyer-body -->
jsFiddle for reference: http://jsfiddle.net/XR7LT/
As you can see, I'm applying a fadeOut() effect to the pseudo element in order to disappear gently. The problem is, the fadeOut() only applies to the first pseudo element, while hiding the others without any effect.
Problem shows on both Chromium and FF browser, Ubuntu Linux 12.10.
Any ideas?
Thanks in advance.

Your CSS is not the same for all elements.
The transitions should not be in both .strappamiX and .strappamiX-wrap,
I removed them from wrap:
.strappami1 {
display: block;
width: 100px;
height: 250px;
background: red;
z-index: -23;
position: absolute;
bottom: -200px;
left: 103px;
transition: all 2s ease-in;
-moz-transition: all 2s ease-in;
-webkit-transition: all 2s ease-in;
-o-transition: all 2s ease-in;
}
.strappami1-wrap {
display: block;
position: absolute;
width: 100px;
height: 250px;
bottom: -200px;
left: 103px;
background: transparent;
}
Created a fork of your fiddle here:
http://jsfiddle.net/sn6ZT/1/

I got here after Roise, but you should be able to simplify your solution significantly by leveraging parent child relationships and adding multiple classes.
http://jsfiddle.net/XR7LT/4/
When you have 5 elements that should all have the same behavior, use the same class for all of them, and apply the code to all of them. Then you can add some additional classes to move the additional pieces over a bit.
SIMPLER HTML
<section class="flyer">
<div class="strappami-wrap w0">
<div class="cover"></div>
<div class="strappami"></div>
</div>
<div class="strappami-wrap w1">
<div class="cover"></div>
<div class="strappami"></div>
</div>
<div class="strappami-wrap w2">
<div class="cover"></div>
<div class="strappami"></div>
</div>
<div class="strappami-wrap w3">
<div class="cover"></div>
<div class="strappami"></div>
</div>
<div class="strappami-wrap w4">
<div class="cover"></div>
<div class="strappami"></div>
</div>
</section>
SIMPLER CSS
.flyer {
display: block;
width: 900px;
height: 220px;
background: yellow;
margin: 0 auto;
position: relative;
}
.strappami {
display: block;
width: 100px;
height: 250px;
background: red;
z-index: -23;
position: absolute;
left: 0;
transition: all 2s ease-in;
-moz-transition: all 2s ease-in;
-webkit-transition: all 2s ease-in;
-o-transition: all 2s ease-in;
}
.strappami-wrap {
display: block;
position: absolute;
width: 100px;
height: 250px;
background: transparent;
bottom: -200px;
left: 0px;
}
.strappami-wrap.w1 {
left: 110px
}
.strappami-wrap.w2 {
left: 220px
}
.strappami-wrap.w3 {
left: 330px
}
.strappami-wrap.w4 {
left: 440px
}
.strappami-wrap .cover {
content: '';
display: block;
position: absolute;
width: 100px;
height: 50px;
background: green;
top: 30px;
left: 0px;
}
.strapping {
bottom: -900px;
opacity: 1;
z-index: -200;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
}
.strapping-alt {
bottom: -800px;
opacity: 1;
z-index: -200;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
}
SIMPLER JS
$(document).ready(function() {
$(".strappami-wrap").on('click', function() {
var r = Math.floor(Math.random()*10);
if (r < 5){
$(this).find(".strappami").addClass('strapping');
} else {
$(this).find(".strappami").addClass('strapping-alt');
}
$(this).find(".cover").fadeOut();
});
});