Double level of sliding DIV on Mouse Hover - javascript

I am trying to create a similar effect as in the site http://tracelytics.github.io/pageguide/ where when you hover the mouse on the "Page guide" icon present in left side of screen, it extends further and show another level of information along with it.
How can I get this effect? I also want to use the same icon.
I don't know where to start on this. Any sample fiddle or plugin will help me. Thanks.

http://jsfiddle.net/fenderistic/SqjfT/
Here's a very simple implementation I created that simulates what you see in that plugin.
var old;
$(".hover").hover(
function(){
old = $(this).css("right");
$(this).animate({right:"0"},100);
}, function() {
$(this).animate({right:old},100);
}
)

You can do this with css and only jquery to open the modal. This post first will have the css only (I did not put the image, but if you have some css knowledge you can add your own image).
http://jsfiddle.net/cornelas/9sH3v/
body {
overflow: hidden;
}
#page_tab {
background: #ccc;
width: 150px;
height: 50px;
position: absolute;
right: -5em;
transition: all .5s ease;
}
#page_tab:hover {
right: 0;
transition: all .5s ease;
}
<div id="page_tab"></div>
HERE IS THE JQUERY
http://jsfiddle.net/cornelas/9sH3v/1/
$('#page_tab').click(function () {
function buildFrame() {
if ($('#mid').length > 0) {} else {
$('body').append("<div id='mid'></div>");
$('#mid').css({
height: "100%",
width: "100%",
position: "absolute",
top: "0",
"backgroundColor": "rgba(51, 51, 51, .5)"
});
}
if ($('#info').length > 0) {} else {
$('#mid').append("<div id='info'></div>");
$('#info').css({
position: "absolute",
top: "35%",
left: "35%",
fontSize: "6em",
color: "#fff"
});
}
}
buildFrame();
$('#info').empty().append("YOUR CONTENT");
});

This effect has been achieved with CSS3 animations. You must declare the transition property in your CSS, here you have an example code:
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
And here you have an example in jsfiddle:
http://jsfiddle.net/elchininet/Zm9uc/

I may be slow to make a fiddle but... her ya go. You have to use css transitions like so
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
. I made a fiddle.
http://jsfiddle.net/Davidicus/BpAL5/

Related

why css transition work with delay

So, I touch css property 'max-height' of me categories list using js.
In first case when list is not full opened transition works fine.
In second case when I need to hide some part of list, css transition start like with delay.
.category_list>ul {
display: inline-block;
text-align:left;
overflow: hidden;
word-wrap: break-word;
width: 170px;
transition: max-height 1s ease-out;
-webkit-transition: max-height 1s ease-out;
-moz-transition: max-height 1s ease-out;
-o-transition: max-height 1s ease-out;
}
$('body').on('click','.full_category_list>span',function(){
if ($(this).text()=='open list') {
$(this).parent().parent().find('ul').stop().css('max-height','500px');
$(this).text('hide list');
} else {
var ul = $(this).parent().parent().find('ul');
console.log($(ul).attr('data-height'));
$(ul).stop().css('max-height',$(ul).attr('data-height'));
$(this).text('open list');
}
});
How to say to list hide right now? Please help me :)
Lik to fiddle here fiddle
So, decision is so simple!
Need to open list on its childrens sum height. Right code:
$('body').on('click','.full_category_list>span',function(){
if ($(this).text()=='open list') {
var ul = $(this).parent().parent().find('ul');
$(ul).stop().css('max-height',$(ul).attr('data-fullheight'));
$(this).text('hide list');
} else {
var ul = $(this).parent().parent().find('ul');
$(ul).stop().css('max-height',$(ul).attr('data-height'));
$(this).text('open list');
}
});
And lik to updated fiddle fiddle
Thanks #vel !!!
Updated fiddle - no need JS!!!
Fix delay solution:
Put cubic-bezier(0, 1, 0, 1) transition function for element.
.text {
overflow: hidden;
max-height: 0;
transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
&.full {
max-height: 1000px;
transition: max-height 1s ease-in-out;
}

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;
}

css3 transitionend doesn't fire on firefox

Please look at the next fiddle and help me understand why in Firefox, the alerts aren't fired.
HTML
<div class="test1">TEST1</div>
CSS
.test1 {
opacity: 0;
width: 300px;
height: 150px;
background-color: blue;
transition: opacity 0.2s 0 ease-in;
&.fade-in {
opacity: 1
}
}
JS
$(".test1").ready(function(){
$(".test1").one("webkitTransitionEnd transitionend MSTransitionEnd oTransitionEnd transitionEnd", function(event){
alert("transition fired");
if ( event.target == event.currentTarget ) {
alert(event.target);
}
});
setTimeout(function(){
$(".test1").addClass("fade-in");
},1000);
});
Updated code and fiddle
add -moz- at defor of animation property
-moz-transition: PROPERTY or CSS CLASS NAME .3s ease;
example:
-moz-transition: width .3s ease;
-moz-transition: fade-out .3s ease;

jQuery toggleClass - can't animate or give it a transition

I'm having a small issue with my code. I have an element that when the page scrolls it will appear. However, I cannot get it to "appear" in a smoother way. I have tried CSS transitions and attempted fadeIn but neither work. It always just "jumps" in, I cannot get it to ease in.
Here is the code:
$(window).on("scroll", function () {
$('.navbar').toggleClass('visible', $(document).scrollTop() > 40);
});
So it appears just fine, but I can't figure out how to animate adding the class name.
This is the CSS btw:
.navbar {
visibility: hidden;
}
.navbar.visible {
visibility: visible;
}
visibility can't be animated with CSS transitions.
But you can do :
.navbar {
opacity: 0;
transition: opacity .5s ease; // Feel free to use prefixes.
}
.navbar.visible {
opacity: 1;
}
CSS transition / animations is surely the best way to animate something in 2014. You should avoid fadeToggle() and others jQuery animation methods.
instead of using toggleClass, use fadeToggle. it will do everything for u as far as CSS..
give it a try, just fadeToggle();
Here is the example of your code with correct css transition. You cannot animate visibility, but you can play with position and opacity.
http://jsfiddle.net/xZ6fm/
.navbar {
position: fixed;
top: -100px;
left: 0; right: 0;
padding: 12px;
opacity: 0;
background: #ccc;
}
.navbar.visible {
top: 0;
opacity: 1;
-webkit-transition: top 0.3s linear, opacity 0.7s linear;
-moz-transition: top 0.3s linear, opacity 0.7s linear;
transition: top 0.3s linear, opacity 0.7s linear;
}
As indicated in the other answer, fadeToggle() will get the work done for you. And frankly, it's probably the easiest way to accomplish such an effect.
CSS transitions require the transition property. Place this block of code in each of your CSS declarations:
transition: visibility .25s linear;
-webkit-transition: visibility .25s linear;
-moz-transition: visibility .25s linear;
-o-transition: visibility .25s linear;
If you have difficulties with visibility, try using opacity instead.

Taking advantage of hardware acceleration by using -webkit-transform instead of -webkit-transition?

I wish to create an animation where upon every click of a button, an object moves a certain amount to its right.
e.g If the initial position of the object was say "left:10px" and every 1 loop of animation moves it by say 10px, then after first click it should be at 20px, after second click it should be at 30px and so on.
Here's my code right now:
JavaScript
document.getElementById( 'move-me' ).addEventListener( 'click', function () {
var move = document.getElementById( 'move' );
move.style.left = ( move.offsetLeft + 10 ) + 'px';
}, false );
HTML
<button id="move-me">Move</button>
<div id="move"></div>
CSS
#move {
background: green;
height: 50px;
left: 0px;
position: absolute;
top: 100px;
transition: left 250ms ease-in-out;
-moz-transition: left 250ms ease-in-out;
-ms-transition: left 250ms ease-in-out;
-o-transition: left 250ms ease-in-out;
-webkit-transition: left 250ms ease-in-out;
width: 50px;
}
This code uses CSS3 transitions but it doesn't make use of the -webkit-transform hardware acceleration on my android device. How do I fix that?
The choice is not between -webkit-transform and -webkit-transition, it's between left and -webkit-transform.
Here is how to make use of 3d acceleration:
#move {
background: green;
height: 50px;
left: 0px;
position: absolute;
top: 100px;
-moz-transition: -moz-transform 250ms ease-in-out;
-ms-transition: -ms-transform 250ms ease-in-out;
-o-transition: -o-transform 250ms ease-in-out;
-webkit-transition: -webkit-transform 250ms ease-in-out;
transition: transform 250ms ease-in-out;
width: 50px;
}
Javascript:
document.getElementById( 'move' ).addEventListener( 'click', function() {
var move = document.getElementById( 'move' );
var transform = "translate3d("+ (move.offsetLeft+200) + "px, 0, 0)";
move.style.webkitTransform = transform;
move.style.mozTransform = transform;
move.style.msTransform = transform;
move.style.oTransform = transform;
move.style.transform = transform;
}, false );
http://jsfiddle.net/CjQ8H/
You can also use translateX. This defintely hardware accelerates.
targetDiv.style.webkitTransition = "0ms"
targetDiv.style.webkitTransform = "translateX(100%)
This would move a div to the right by 100% but nice and smooth only in hardware accelerated devices.

Categories

Resources