So, I'm trying to set up a expanding and collapsing menu depending on what item you are hovering. I am using css transitions to make the expanding and collapsing smooth and some jQuery to change width css properties. However, IE doesn't support transition css so I am trying to find a way to do this with jQuery but haven't found a solution. My knowledge isn't the greatest when it comes to jQuery. Any help would be amazing.
<html>
<head>
<style>
.a{
width:100px;
height:100px;
background:#852369;
position:relative;
float:left;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 1s ease;
transition: width 1s ease;
}
.b{
width:100px;
height:100px;
background:#542365;
position:relative;
float:left;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 1s ease;
transition: width 1s ease;
}
.c{
width:100px;
height:100px;
background:#523641;
position:relative;
float:left;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 1s ease;
transition: width 1s ease;
}
</style>
</head>
<body>
<div class="a">This is div a</div>
<div class="b">This is div b</div>
<div class="c">This is div c</div>
<script>
$(function() {
$('.a').hover(function() {
$('.b,.c').css('width', '50');
$('.a').css('width', '200');
}, function() {
$('.a,.b,.c').css('width', '');
}
);
$('.b').hover(function() {
$('.a,.c').css('width', '50');
$('.b').css('width', '200');
}, function() {
$('.a,.b,.c').css('width', '');
}
);
$('.c').hover(function() {
$('.a,.b').css('width', '50');
$('.c').css('width', '200');
}, function() {
$('.a,.b,.c').css('width', '');
}
);
});
</script
</body>
</html>
Here is a simple jsfiddle of what I have currently.
http://jsfiddle.net/kevin11189/kRZHL/1/
Thanks,
Kevin
You can use the animate and stop methods to accomplish this:
http://jsfiddle.net/brianpeiris/CgY2b/2/
$(function() {
var menus = $('.menu');
menus.hover(function() {
menus.stop();
$(this).animate({'width': '200'});
menus.not(this).animate({'width': '50'});
}, function () {
menus.stop().animate({'width': '100'});
});
});
<div class="menu a">This is div a</div>
<div class="menu b">This is div b</div>
<div class="menu c">This is div c</div>
.menu{
width:100px;
height:100px;
position:relative;
float:left;
}
.a{ background:#852369; }
.b{ background:#542365; }
.c{ background:#523641; }
Related
http://embed.plnkr.co/tcTZlA/preview
Basically all I want is not having to set the height in the .slideDown class. I want it to expand based on the height of the content of the div.
I didn't find how to do this the AngularJS way so if you have any clue I'll take it.
Thank you
.slideDown {
height:141px;
transition:height 0.35s ease;
overflow:hidden;
position:relative;
}
In this class remove height property then it will become non fixed size like this
try this
.slideDown.ng-hide {
max-height: 0;
transition: max-height 0.35s ease-out;
overflow:hidden;
position:relative;
}
.slideDown {
max-height: 1000px;
transition: max-height 0.35s ease;
overflow:hidden;
position:relative;
}
work with max-height property not height
.slideDown.ng-hide {
max-height:0;
transition:max-height 0.35s ease;
overflow:hidden;
position:relative;
}
.slideDown {
max-height:400px; // make this value higher than the expected content value
transition:max-height 0.35s ease;
overflow:hidden;
position:relative;
}
Use CSS transitions for slide down animation and write down your classes like
.blockToHideAndShow{
height : 0px;
-webkit-transition: height 0.3s ease;
-moz-transition: height 0.3s ease;
-o-transition: height 0.3s ease;
-ms-transition: height 0.3s ease;
transition: height 0.3s ease;
}
.blockToHideAndShow.slideDown{
height : initial;
}
Hope It'll help.
Change the height of .slideDown to auto. So that section would be:
.slideDown {
height:auto;
transition:height 0.35s ease;
overflow:hidden;
position:relative;
}
EDIT: You can use ng-slide-down. Then your slideDown div would use ng-slide-down instead of ng-hide.
I'm basically trying to make popups appear from the element they were clicked, similar to Angular Material Dialogs here. I know how to do transitions by adding and removing classes but what about when you want to work with styles that are calculated dynamically and need to be set through javascript. This doesn't seem to work.
See plunkr
$(document).ready(function(){
$(document).on("click", ".heading" , function(ev){
var el = $(this);
var offset = el.offset();
$(".popup").css("top", offset.top);
$(".popup").css("left", offset.left);
$(".popup").addClass("visible");
});
$(".close").on("click", function(ev){
$(".popup").removeClass("visible");
});
});
.heading{ width:100px; height:40px; background-color:grey; margin:50px 0 150px 0; padding:10px; }
.popup{
background-color:grey;
position:absolute;
height:0
width:0; opacity:0;
-webkit-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s
ease-out, top 0.3s ease-out, left 0.3s ease-out;
-moz-transition:
opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top
0.3s ease-out, left 0.3s ease-out; -ms-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s
ease-out, left 0.3s ease-out;
-o-transition: opacity 0.5s ease-out,
width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left
0.3s ease-out; }
.popup.visible{ opacity:1; height:250px; width:400px;
top:400px !important; left:200px !important; }
.close:hover{cursor:pointer;}
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="heading">click me 1st </div>
<div class="heading">click me 2nd</div>
<div class="heading">click me 3rd</div>
<div class="popup">
ttttttttttttttttttttttttttttttttttttttttttttttttttttttt
<div style="margin:40px" class="close">close</div>
</div>
</body>
</html>
The way it should be is it transitions from the div you clicked on, ends on the center and when you close it transitions back the div you clicked on.
The way it actually is is: clicking the first div makes the popup appear where it's supposed to end. After this point the transition (top and bottom ones) always seem to be one step behind. If you click the 2nd div the transition starts from where it ended before i.e the previous div(which is wrong, it should start from the div you clicked) and ends in the middle, which is also correct. When you hit close it goes back to the correct div.
Is there some way around this? Tell the engine to update values manually or may be edit classes through javascritp? Any help would be appreciated.
Thanks
Transition according to google is:
the process or a period of changing from one state or condition to
another.
To have a transition you have to start with one state, and change it to another state. However, the state needs to be gradual, which means that you've got to wait a bit after setting the 1st state.
When you do this, you set the start top and left and then override them immediately using the visible class.
Note - I've changed the dimensions a bit, to fit the SO examples area. You can find the example with original dimensions here.
$(".popup").css("left", offset.left);
$(".popup").addClass("visible");
To prevent that, use a delay. I've used requestAnimationFrame.
I've also added cleanup for the top and left settings, after the popup closes.
$(document).on("click", ".heading", function(ev) {
var offset = $(this).offset();
var $popup = $(".popup");
//set the starting point
$popup.css({
top: offset.top,
left: offset.left,
visibility: 'visible'
});
//wait and start the show animation
requestAnimationFrame(function() {
$popup.addClass("visible");
});
});
$(".close").on("click", function(ev) {
var $popup = $(".popup");
$popup
//only when the hide animation ends we reset the popup
.one('transitionend', function() {
$popup.css({
top: '',
left: '',
visibility: 'hidden'
});
})
//start the hide animation
.removeClass("visible");
});
h1 {
color: red;
}
.heading {
width: 100px;
height: 40px;
background-color: grey;
margin: 50px 0;
padding: 10px;
}
.popup {
background-color: grey;
position: absolute;
height: 0;
width: 0;
opacity: 0;
overflow: hidden;
-webkit-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
-moz-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
-ms-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
-o-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
}
.popup.visible {
opacity: 1;
height: 150px;
width: 200px;
top: calc(50% - 75px) !important;
left: calc(50% - 100px) !important;
}
.close:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="heading">heading 1</div>
<div class="heading">heading 2</div>
<div class="heading">heading 3</div>
<div class="popup">
rghe;roigegrh'ragjh oewighe ergj ergj rrgj ger[
<div style="margin:40px" class="close">close</div>
</div>
use below mentioned CSS code
.heading {
width: 100px;
height: 40px;
background-color: grey;
margin: 50px 0 150px 0;
padding: 10px;
}
.popup {
background-color: grey;
position: absolute;
height: 0;
width: 0;
opacity: 0;
-webkit-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
-moz-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
-ms-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
-o-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
}
.popup.visible {
opacity: 1;
height: 250px;
width: 400px;
top: 400px !important;
left: 200px !important;
}
.close:hover {
cursor: pointer;
}
i have a logo image in sticky topbar menu so when scrolling down i'm trying to change the image width using css transition but it is not working with jquery window scroll when i add the css class to logo image but when i hover on the logo image it work
my code css
.logo img
{
width: 100%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
.transition , .logo img:hover{
width: 50%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
js code
$j = jQuery.noConflict();
$j(function(){
$j(window).on("scroll", function () {
if ($j(this).scrollTop() > 100) {
$j('.logo img').addClass('transition');
console.log($j(this).scrollTop());
} else {
$j('.logo img').removeClass('transition');
console.log('cvc');
}
});
});
please any help and many thanks in advance.
You wants something like this ?
Just changed your selectors a bit. Because of the inheritance of .logo img, .transition wasn't suffisant to erase .logo img properties.
.logo img
{
width: 100%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
.logo .transition{
width: 50%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
So I'm struggling with hover effect. The black box is the image and I want the red mask color (which has the same width and height) to be placed in front of the black box whenever user will hover on that image, I cannot do this because it seems the effect is under the image whenever I hover mouse on that image....
.third-effect .mask {
opacity: 0;
overflow: visible;
border: 100px solid rgba(0, 0, 0, 0.7);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
width: 274px;
height: 197px;
}
.third-effect a.info {
position: relative;
top: -10px;
opacity: 0;
-webkit-transition: opacity 0.5s 0s ease-in-out;
-moz-transition: opacity 0.5s 0s ease-in-out;
-o-transition: opacity 0.5s 0s ease-in-out;
-ms-transition: opacity 0.5s 0s ease-in-out;
transition: opacity 0.5s 0s ease-in-out;
}
.third-effect:hover .mask {
opacity: 1;
border: 100px solid rgba(0, 0, 0, 0.7);
}
.third-effect:hover a.info {
opacity: 1;
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<section class="module content">
<div class="view third-effect">
<img src="images/chronos.png" />
<div class="mask">
Full Image
</div>
</div>
</div>
</div>
In your css, you can use the :hover selector to modify the style of your element when your mouse hovers it.
Take a look at this example to see how you can use it.
http://jsfiddle.net/wof159fh/
.third-effect .mask {
opacity: 0;
overflow:visible;
border:100px solid rgba(0,0,0,0.7);
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
width:274px;
height:197px;
}
.third-effect a.info {
position:relative;
top:-10px;
opacity: 0;
-webkit-transition: opacity 0.5s 0s ease-in-out;
-moz-transition: opacity 0.5s 0s ease-in-out;
-o-transition: opacity 0.5s 0s ease-in-out;
-ms-transition: opacity 0.5s 0s ease-in-out;
transition: opacity 0.5s 0s ease-in-out; }
.third-effect:hover .mask {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.third-effect:hover a.info {
opacity:1;
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<section class="module content">
<div class="view third-effect">
<img src="images/chronos.png" >
<div class="mask">
Full Image
</div>
</div>
</div>
</div>
You can do it this way
#image {
background-image: url('http://lorempixel.com/400/200/');
width: 300px;
background-size: cover;
height: 300px;
}
#image:hover {
background-color: red;
background-image: none;
}
<div id="image"></div>
Im not sure if you want the overlaid div to be clickable or what. You can use javascript to set stuff up. So you can add a transparent color to the "hover" which would mask it in some color. ex: set opacity 0.8 with red.
Also there is the approach i did. http://jsfiddle.net/kv0fsLs2/
<div id="outer">
<div id="image"></div>
<div id="hover"></div>
</div>
#image {
background-color:red;
}
#hover {
position:absolute;
background-color: blue;
}
div > div {
width: 100px;
height: 100px;
top: 0px;
left: 0px;
}
#outer {
position:relative;
left: 250px;
top: 250px;
}
this way you can tie a click handler to the overlaid div, if you didnt want to do it to the actual item.
Edit: Here you can see it using opacity.... http://jsfiddle.net/kv0fsLs2/1/ All you would need to do is have the image be there instead of a red background as i did in the simplest of examples.
Edit 2: Here is another fiddle, actually using an image: http://jsfiddle.net/kv0fsLs2/2/
I have Bootstrap grid of two columns. Full jsfiddle code here.
The problem with the animation applied using this code:
CSS:
.row-fluid div {
-webkit-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
-moz-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
-o-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}
When showing/toggling the left column, the right column flickers and pops from bottom to top besides the left columns while stretching.
If I just disable this CSS there is no animation and the process is not noticed as they switch fast.
How to add animation without showing the columns flickers.
Full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Examples for bootstrap-slider plugin">
<meta name="author" content="">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<style>
.row-fluid div {
-webkit-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
-moz-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
-o-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}
#col1 {
background-color: #A6BFBA;
}
#col2 {
background-color: #DE4124;
}
#trig {
margin: 50px;
}
.row-fluid .col-0 + [class*="col"]{
margin-left: 0;
}
#media all and (max-width:768px) {
.col-0 {
width:0;
padding:0;
overflow:hidden;
float:left;
display:none;
}
}
</style>
<div class="container-fluid">
<div class="row-fluid">
<div id="col1" class="col-xs-3 col-md-3">
Left Column text here<br/>
Left Column text here<br/>
Left Column text here<br/>
Left Column text here<br/>
Left Column text here<br/>
Left Column text here<br/>
Left Column text here<br/>
Left Column text here<br/>
Left Column text here<br/>
Left Column text here<br/>
Left Column text here<br/>
</div>
<div id="col2" class="col-xs-9 col-sm-9">
<a id="trig" class="btn btn-primary visible-xs">Reflow Me</a><br/>
Right Column text here<br/>
Right Column text here<br/>
Right Column text here<br/>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#trig').on('click', function () {
$('#col1').toggleClass('col-0');
$('#col2').toggleClass('col-xs-12 col-xs-9');
});
});
</script>
</body>
</html>
try this
Sorry, small correction in order to make the animation smoother:
fiddle code - live example
CSS:
.row-fluid {
overflow:hidden;
}
.row-fluid div {
-webkit-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
-moz-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
-o-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}
#col1 {
background-color: #A6BFBA;
}
#col2 {
background-color: #DE4124;
}
#trig {
margin: 50px;
}
.row-fluid .col-0 + [class*="col"]{
margin-left: 0;
}
.offcanvas {
margin-left:0;
}
#media all and (max-width:768px) {
.col-0 {
width:0;
padding:0;
overflow:hidden;
float:left;
display:none;
}
.offcanvas {
margin-left:-25%;
}
}
jQuery:
$(document).ready(function() {
$('#trig').on('click', function () {
$('#col1').toggleClass('offcanvas');
$('#col2').toggleClass('col-xs-12 col-xs-9');
});
});
UPDATE:
#media all and (max-width:768px) {
.col-0 {
width:0;
padding:0;
overflow:hidden;
float:left;
display:none;
}
.offcanvas {
margin-left:-25%;
height:0px;
opacity:0;
}
}
UPDATE #2
if you want to animate sidebar height&opacity change this code too:
.row-fluid div {
-webkit-transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
-moz-transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
-o-transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
}