Develop Reference

How to end CSS transition with jquery or js?

I want to end my css transition with jquery or js. I don't mean pause, I want to end them, as if they became 100% done. I have css transitions and not animations.
The properties I am using transition on are top and left, and it is a position absolute element.

You can simply override the transition-property rule to none.
#el {
position: relative;
left: 0;
top: 25px;
width: 50px;
height: 50px;
transition: all 5s linear;
background: red;
}
body:hover #el{
left: calc(100vw - 50px);
}
button:active + #el {
transition-property: none;
}
:root,body{margin:0}
<button>stop transition</button>
<div id="el"></div>
Now how you trigger this is up to you, it can be using a special class, or any other condition.

Hello your question is kinda ambiguous.
if you are using transition instead of animation you can control the flow of it in the same css example :
transition: background-color .2s linear 0s; /*Standard*/
If you want to interrupt the transition with JS you can assign other Css valor to an different class name or property when some action you want is triggered.
.normal{
transition: background-color .2s linear 0s; /*Standard*/
}
[stop = yes] {
background: black;
}
document.body.addEventListener('mouseover', function(e){
e.stopPropagation();
if(someting you want){
document.queryselector(".normal").setAttribute("stop","yes");
}
else{
document.queryselector(".normal").setAttribute("stop","no");
}
},false);
if something you want were triggered then the atribute will be set to the no
transition and this also cut off the running one.

$('.toggle-animation').click(function(){
$('.element').stop(true).toggleClass('animating');
});
.element{
top: 0px;
left: 0px;
width: 100px;
height: 100px;
position:relative;
background: red
}
.animating{
top: 100px;
left: 100px;;
transition: all 5s linear 0s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element"></div>
<button type="button" class="toggle-animation">Click me</button>

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');

Start a CSS transition via JS does not work

I want to start a CSS transition, that changes the background-color and the dimension if a button is clicked. But there is a mistake in the code:
js fiddle
jQuery
$(function() {
$('#change').click(function() {
$('#box').addClass('change');
});
});
HTML
<div id="box" class="start"></div>
<div id="button">click</div>
CSS
.start{
height:100px;
width:100px;
background: black;
transition: all 2.0s linear;
-webkit-transition: all 0.8s linear;
-moz-transition: all 0.8s linear;
-ms-transition: all 0.8s linear;
-o-transition: all 0.8s linear;
}
.change{
width: 200px;
height: 200px;
background:yellow;
}
#button{
width: 80px;
height: 20px;
padding: 4px;
margin: 5px;
border:solid 1px black;
background: grey;
cursor: pointer;
color: white;
}

The id of the button in the HTML & CSS (#button) is different from the id of the button in the JS (#change), that's why.
If you replace #change with #button in the JS, then it works.
Note: When you list transition rules for various browsers, you don't need the -ms- one (IE10 supports transitions unprefixed and IE9 does not support them at all; the -ms- prefix was only needed for early IE10 previews) and you should always put the unprefixed one last. At this point, all current versions of desktop browsers support transitions unprefixed.

Id of your button is button, not change.
Use $('#button') instead of $('#change').
DEMO HERE.

It should be using #button,
$(function() {
$('#button').click(function() {
$('#box').addClass('change');
});
});
as per your HTML
<div id="button">click</div>
http://jsfiddle.net/qsAZQ/

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

css for fading overlaid video controls?

In some DVD/Video players, the controls for play/pause/volume/etc are overlaid on top of the video itself in a box. The controls fade in when you move the mouse, and then, after some delay, fades back out (so you can enjoy the video again).
I am wondering -- how to create this effect using CSS? Is there a way to reset the fade-out timer on events other than body mouse move?

Let's say we have the following HTML template:
<div class="player">
<div class="controls">Controls go here</div>
</div>
It is possible if you use CSS transition-delay: http://jsfiddle.net/teddyrised/7sBwA/
.player {
background-color: #333;
position: relative;
width: 100%;
height: 400px;
}
.controls {
background-color: rgba(0,0,0,.5);
border-radius: 5px;
color: #eee;
padding: 1em;
position: absolute;
left: 2em;
right: 2em;
bottom: 2em;
text-align: center;
pointer-events: none;
opacity: 0;
transition: opacity .5s ease-in-out;
transition-delay: 0;
}
.player:hover .controls {
pointer-events: auto;
opacity: 1;
}
.player:not(:hover) .controls {
transition-delay: .5s;
}
However, if you want better browser support, you should use JS instead.
When using jQuery, you can exploit the .delay() method when using jQuery effects, such as .fadeOut() in our example: http://jsfiddle.net/teddyrised/g7kge/
JS:
$(document).ready(function(){
$(".player .controls").hide();
$(".player").hover(
function(){
// Mouse enters. Fade in controls
$(this).find(".controls").fadeIn();
},
function(){
// Mouse leaves. Delay controls fade out by 1000ms
$(this).find(".controls").delay(1000).fadeOut();
});
});

It is possible to control the fade-out timer using CSS with:
-(prefix)-transition: all <duration> ease-out <delay>;
Take a look at this fiddle.