Develop Reference

Javascript-JQuery: sliding menu going left-to-right?

I have a piece of text put outside of the browser and I want it to appear when the cursor hovers over another piece of text. Here's my code:
HTML file
<div class="panel_help">
<div class="help_text">
<h4>Τι κάνω?</h4>
<p>This is the text that is hidden and needs to appear...</p>
</div>
<p class="slide_help"><strong>Show text</strong></p>
</div>
CSS file
.help_text {
color: aliceblue;
display:block;
position:fixed;
right: -9em;
top: 6em;
width:150px;
height:20px;
font-size: 18px;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
.slide_help {
color: aliceblue;
right: 10px;
top: 4.5em;
position: fixed;
font-size: 150%;
}
JS file
$(".panel_help").mouseenter(function() {
$(".help_text").animate({right: "1.5em"},'slow');
$(".slide_help").animate({right: "9em"}, 'slow');
});
$(".panel_help").mouseleave(function() {
$(".help_text").animate({right: "-9em"},'slow');
$(".slide_help").animate({right: "1em"}, 'slow');
});
The problem is that sometimes it takes two animations to stop, so it goes left-right-left-right, and then stops! Am I doing something wrong? I'm very new to JQuery... Thanks!

Drop the JavaScript / jQuery and use CSS.
.help_text {
right: -9em;
}
.slide_help {
right: 1em;
}
.help_text, .slide_help {
-webkit-transition: right 0.4s linear;
-moz-transition: right 0.4s linear;
-ms-transition: right 0.4s linear;
-o-transition: right 0.4s linear;
transition: right 0.4s linear;
}
.panel_help:hover .help_text {
right: 1.5em;
}
.panel_help:hover .slide_help {
right: 9em;
}
This way you don't use the jQuery Events, which sometimes don't work properly

Just add .stop() before animate(...) to stop your current animation:
$('.panel_help').mouseenter(function() {
$('.help_text').stop().animate({right: '1.5em'}, 'slow');
$('.slide_help').stop().animate({right: '9em'}, 'slow');
});
$('.panel_help').mouseleave(function() {
$('.help_text').stop().animate({right: '-9em'}, 'slow');
$('.slide_help').stop().animate({right: '1em'}, 'slow');
});
.stop() | jQuery API Documentation

The problem is that you need to finish the animation when the mouse leave the area. If not, the animation won't stop.
Try to put stop() before init every animation:
$(".help_text").stop().animate({right: "1.5em"},'slow');
$(".slide_help")stop().animate({right: "9em"}, 'slow');

when added spin (spin.js) - web page lose functionality

Please, I need help about spin function (using spin.min.js script)
Problem appears when I added it to my web page, web page loge functionality - I can not click on any link and can not mark anything with mouse. I don't know what's the problem, please help me.
SCRIPT IN BODY TAG
<script src="js/vendor/spin.min.js"></script>
HTML
<div class="loading loading-out">
<div id="spin">
</div>
</div>
CSS
.loading{
background: #F7F7F7;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 500;
.loading-out{
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
#spin{
margin: 0px auto;
position: absolute;
left: 50%;
top: 50%;
JQUERY
$(function()
$(window).load(function() {
// Fadeout loading
$('.loading').addClass('loading-out');
// Hide loading
setTimeout(function() {
$('.loading').hide();
}, 800);
});

Your CSS definitions must be enclosed in {}. Right now it's only { without closing }
Your jQuery anonymous function is missing {}. Change $(function() /* window load */ to $(function() {/* window load */}).
Check dev tools console to see if there is any errors. It may also be that your JS is taking huge amount of memory and browser is still executing JS while you try to interact with it.
Check if you have jQuery loaded before any script that uses $.

How to set css3 animation inline or by javascript?

I'd like to set css3 animation effect to multi element, but the animated position was related to the count of elements which is not certain. I had to set css style by js (maybe a mvvm framework).
sample code:
#-webkit-keyframes position {
0% {left:0}
100% {left: 5*elementCounts px;}
}
I found there's no way to set css property by data-*, neither to add inline css3 animation defining inline.
Anybody have idea to resolve this in css or mvvm way?

Two options:
If the number of possible ending positions is small and/or known in advance, you could write a number of variants of your keyframe definition with different names (position10, position20, etc).
If that is not an option, consider setting the element's position with jQuery so you can do all the calculations you need, and only relying on CSS for the animation duration. Here's a fiddle showing how you can achieve that:
JS
$(document).ready(function() {
// calculate the intended location
var div1Position = 100*1;
var div2Position = 100*2;
$('#div1').animate({ left: div1Position });
$('#div2').animate({ left: div2Position });
});
HTML
<div id="parent">
<div id="div1" class="box">Test #1</div>
<div id="div2" class="box">Test #2</div>
</div>
CSS
#parent {
position: relative;
}
.box {
background-color: grey;
color: red;
position: absolute;
display: block;
height: 75px;
width: 75px;
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
Hope this helps!

Growing DIVs on page load?

I wanna display a growing column when loading my website like this:
function init() {
document.getElementsByClassName('col')[0].style.height = '50px';
}
.col {
width: 20px;
min-height: 1px;
transition: height 0.5s ease-out 0s;
background-color: red;
}
<body onload="init()" >
<div class="col" ></div>
</body>
But as you can see it doesn't work. Would it theoretically help to have the onload-attribute placed in the attributes of the div? But that doesn't work, right?
I also could use keyframe animations, I guess. However, I actually have more column than one and all of them should grow to a different height. Therefore I would have to create a keyframe animation for each of my columns, which is kind of messy, I believe.
Does anyone know a clean solution to my problem? Thanks in advance...

This works. Need webkit for Chrome/Safair I believe. Pretty sure you can't animate from min-height either as min-height is not a height. CSS transitions only work from set value to set value.
function init() {
var d = document.getElementsByClassName('col')[0];
d.className = d.className + " col-animate";
}
.col {
width: 20px;
height: 1px;
transition: all 0.5s ease-out 0s;
-webkit-transition: all 0.5s ease-out 0s;
background-color: red;
}
.col-animate {
height: 50px;
}
<body onload="init()" >
<div class="col" ></div>
</body>

It will be good to write like below example CSS to support more possible browsers
.col {
width: 20px;
height: 1px;
transition: all 0.5s ease-out 0s;
-webkit-transition: all 0.5s ease-out 0s; // webkit - chrome safari
-o-transition: all 0.5s ease-out 0s; // Opera
-moz-transition: all 0.5s ease-out 0s; // Mozilla
background-color: red;
}

CSS Transition doesn't work with top, bottom, left, right

I have an element with style
position: relative;
transition: all 2s ease 0s;
Then I want to change its position smoothly after clicking on it, but when I add the style change the transition doesn't take place, instead, the element moves instantly.
$$('.omre')[0].on('click',function(){
$$(this).style({top:'200px'});
});
However, if I change the color property, for example, it changes smoothly.
$$('.omre')[0].on('click',function(){
$$(this).style({color:'red'});
});
What might be the cause of this? Are there properties that aren't 'transitional'?
EDIT: I guess I should have mentioned that this is not jQuery, it's another library. The code appears to work as intended, styles are being added, but transition only works in the second case?

Try setting a default value for top in the CSS to let it know where you want it to start out before transitioning:
CSS
position: relative;
transition: top 2s ease 0s; /* only transition top property */
top: 0; /* start transitioning from position '0' instead of 'auto' */
The reason this is needed is because you can't transition from a keyword, and the default value for top is auto.
It is also good practice to specify exactly what you want to transition (only top instead of all) both for performance reasons and so you don't transition something else (like color) unintentionally.

Perhaps you need to specify a top value in your css rule set, so that it will know what value to animate from.

In my case div position was fixed , adding left position was not enough it started working only after adding display block
left:0;
display:block;

Something that is not relevant for the OP, but maybe for someone else in the future:
For pixels (px), if the value is "0", the unit can be omitted: right: 0 and right: 0px both work.
However I noticed that in Firefox and Chrome this is not the case for the seconds unit (s). While transition: right 1s ease 0s works, transition: right 1s ease 0 (missing unit s for last value transition-delay) does not (it does work in Edge however).
In the following example, you'll see that right works for both 0px and 0, but transition only works for 0s and it doesn't work with 0.
#box {
border: 1px solid black;
height: 240px;
width: 260px;
margin: 50px;
position: relative;
}
.jump {
position: absolute;
width: 200px;
height: 50px;
color: white;
padding: 5px;
}
#jump1 {
background-color: maroon;
top: 0px;
right: 0px;
transition: right 1s ease 0s;
}
#jump2 {
background-color: green;
top: 60px;
right: 0;
transition: right 1s ease 0s;
}
#jump3 {
background-color: blue;
top: 120px;
right: 0px;
transition: right 1s ease 0;
}
#jump4 {
background-color: gray;
top: 180px;
right: 0;
transition: right 1s ease 0;
}
#box:hover .jump {
right: 50px;
}
<div id="box">
<div class="jump" id="jump1">right: 0px<br>transition: right 1s ease 0s</div>
<div class="jump" id="jump2">right: 0<br>transition: right 1s ease 0s</div>
<div class="jump" id="jump3">right: 0px<br>transition: right 1s ease 0</div>
<div class="jump" id="jump4">right: 0<br>transition: right 1s ease 0</div>
</div>

Are there properties that aren't 'transitional'?
Answer: Yes.
If the property is not listed here it is not 'transitional'.
Reference: Animatable CSS Properties