I have a JQuery function to toggle a Div with ( toggle(200) ) so there is a small sliding animation.
However I have another function that will add a class to this div, which change the height of the div with a 0.3s transition.
#navbar {
height: 270px;
transition: height 0.3s ease-out;
}
#navbar.change-size {
height: 430px !important;
}
My problem is that the transition isn't just applying to the height (which was the intended purpose) but it also applies to the first JQuery function toggling when the div slides in.
My question is how can I set up my css so the height transition effect only applies to .change-size height ?
PS: I didn't add my JQuery toggle code as I believe it is not relevant. The JQuery sliding animation is probably tweaking the div's height/width to create the sliding effect, therefore being influenced by the transition I set up.
Please let me know if I'm unclear. Thank you !
Hope this helps
little fiddle
<!DOCTYPE html>
<html>
<head>
<style>
#navbar {
height: 270px;
-ms-transition: all .3s ease-out; /*IE*/
-moz-transition: all .3s ease-out; /*firefox*/
-webkit-transition: all .3s ease-out;/*safari and chrome*/
-o-transition: all .3s ease-out; /*opera*/
background-color: #999;
}
#navbar.change-size {
height: 430px;
}
</style>
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<div id="navbar">
Hello
</div>
<button id="toggle">.change-size</button>
<script>
$(function(){
$("#toggle").on("click", function(){
$("#navbar").addClass("change-size");
})
})
</script>
</body>
</html>
Related
I'm working on a website and I thought it would be cool to have the navbar only show when you move your mouse to the top of the screen. Is that even possible? because I cant find any tutorials on it. Anyway, is there also a way for it to not just appear, but more slide down from the top? Kind of like the windows taskbar does only upside down. Thanks!
This is the site if anyone wants to see the navbar right now: https://www.oakparknerds.tk/
There are a few approaches that could be taken to achieve this. The easiest is to just use CSS to animate the margin-top of the nav bar when hovered. You can set the nav bar to have no background color, then on hover change the color to make it appear.
Example with nav bar ID of #slidingBox:
#slidingBox {
width: 100%;
height: 60px;
background-color: none;
overflow-y: scroll;
margin-left: 0px;
margin-top: -50px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#slidingBox:hover {
margin-top: 0px;
background-color: #d9dada;
}
Here is a fiddle
Here is a way to do this with jquery and css. I changed the background color to orange so you can see it in action.
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="nav_container" style="border:1px solid black;width:100%;height:300px;">
<nav id="my_nav" style="display:none;width:100%; height:200px;background-color:orange;">
Links
</nav>
</div>
<script>
$(document).ready(function(){
$("#nav_container").mouseover(function(){
$("#my_nav").slideDown(3000);
});
$("#nav_container").mouseout(function(){
$("#my_nav").fadeOut();
});
});
</script>
</body>
</html>
I'm having a slight problem with css transition. On my website, I have a div, and in that div is a h1.
Here's the css code.
#inner1 {
background-image: url("rsz_astromenu1.jpg");
height: 333px;
width: 500px;
display: inline-block;
opacity: 0.5;
font-size: 10px;
}
#inner1:hover {
font-size: 50px;
transition: font-size 1s linear;
opacity: 1;
transition: opacity 1s linear;
}
I want to animate the opacity (from 0.5 to 1) and font-size (from 10px to 50px).
However, when I hover my mouse over that div, the opacity is nicely transitioned, but the text just changes the size instantly. So the hover seems to work and change the font-size, why is transition omitted?
If I make it #inner1 h1:hover, the transition works properly but only when I hover over the text. And I want the font-size transition when I hover over that div.
I tried to work around the problem and write a JS script for enlarging the text.
Here's what I came up with. I'll paste all the HTML content as well since there's not much of it.
However, this is not really smooth, I've gone as far as to incrementing only 0.09px every millisecond, but it still looks bumpy and also sends hundreds of unnecessary commands to the browser, right?
How can I solve that problem? Either with CSS or JS?
Thanks in advance ;).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="mainStyle.css">
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner1" class="hover-menu">
<h1 id="astro-h1" class="hover-menu">Astrofotografia</h1>
</div>
<div id="inner2"></div>
</div>
</div>
<script>
var JSinner1 = document.getElementById("inner1");
var JSastroh1 = document.getElementById("astro-h1")
JSastroh1.style.fontSize = "16px";
var textBigger = function() {
var newSize = parseFloat(JSastroh1.style.fontSize) + 0.009 + "px";
window.setInterval(textBigger, 1)
if (parseFloat(newSize) < 60) {
JSastroh1.style.fontSize = newSize;
console.log(newSize);
}
}
JSinner1.addEventListener("mouseover", textBigger)
</script>
</body>
</html>
You're overwriting one transition with another. Try with
transition: font-size 1s linear,opacity 1s linear;
It's very simple, the problem is your :hoverselector, as you are adding two transitions properties, the last one is overwriting the previous one. In order to make this work, just add this to that rule:
transition: opacity 1s linear, font-size 1s linear;
Or you can use
transition: all 1s linear;
instead of using
transition: font-size 1s linear;
transition: opacity 1s linear;
use all
transition: all 1s linear;
or merge the two into one transition: font-size 1s linear,opacity 1s linear;
#inner1 {
background-image: url("rsz_astromenu1.jpg");
height: 333px;
width: 500px;
display: inline-block;
opacity: 0.5;
font-size: 10px;
}
#inner1:hover {
font-size: 50px;
opacity: 1;
transition: all 1s linear;
}
<div id="inner1">
<h1> Some text </h1>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
#inner1 {
background-image: url("rsz_astromenu1.jpg");
height: 333px;
width: 500px;
display: inline-block;
opacity: 0.5;
font-size: 10px;
transition: opacity 1s linear, font-size 1s linear;
}
#inner1:hover {
font-size: 50px;
opacity: 1;
}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner1" class="hover-menu">
<h1 id="astro-h1" class="hover-menu">Astrofotografia</h1>
</div>
<div id="inner2"></div>
</div>
</div>
</body>
</html>
Is there a way to animate display:none to display:block using CSS so that the hidden div slides down instead of abruptly appearing, or should I go about this a different way?
$(document).ready(function() {
$('#box').click(function() {
$(this).find(".hidden").toggleClass('open');
});
});
#box {
height:auto;
background:#000;
color:#fff;
cursor:pointer;
}
.hidden {
height:200px;
display:none;
}
.hidden.open {
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box">
Initial Content
<div class="hidden">
This is hidden content
</div>
</div>
And a JSFiddle
Yes, there is a way:
http://jsfiddle.net/6C42Q/12/
By using CSS3 transitions, and manipulate height, rather than display property:
.hidden {
height: 0px;
-webkit-transition: height 0.5s linear;
-moz-transition: height 0.5s linear;
-ms-transition: height 0.5s linear;
-o-transition: height 0.5s linear;
transition: height 0.5s linear;
}
.hidden.open {
height: 200px;
-webkit-transition: height 0.5s linear;
-moz-transition: height 0.5s linear;
-ms-transition: height 0.5s linear;
-o-transition: height 0.5s linear;
transition: height 0.5s linear;
}
More here: Slide down div on click Pure CSS?
Since you're already using jQuery, the simplest thing is just to use slideDown(). http://api.jquery.com/slidedown/
There's also slideToggle().
Then you don't need to manually do all the browser-specific transition css.
I like the idea of CSS transitions, but it's still very jumpy. Sometimes the max-height has to be set to a very high number because of dynamic content which renders the transition useless as it's very jumpy. So, I went back to jQuery, but it had its own faults. inline elements are jumpy.
I found this to work for me:
$(this).find('.p').stop().css('display','block').hide().slideDown();
The stop stops all previous transitions.
The css makes sure it's treated as a block element even if it's not.
The hide hides that element, but jquery will remember it as a block element.
and finally the slideDown shows the element by sliding it down.
What about
$("#yourdiv").animate({height: 'toggle'});
Toggle will switch your div on/off, and the animate should make it appear from below. In this scenario, you don't need the specific CSS to "hide" it.
We can use visibility: hidden to visibility: visible instead of display: none to display: block property.
See this example:
function toggleSlide () {
const div = document.querySelector('div')
if (div.classList.contains('open')) {
div.classList.remove('open')
} else {
div.classList.add('open')
}
}
div {
visibility: hidden;
transition: visibility .5s, max-height .5s;
max-height: 0;
overflow: hidden;
/* additional style */
background: grey;
color: white;
padding: 0px 12px;
margin-bottom: 8px;
}
div.open {
visibility: visible;
/* Set max-height to something bigger than the box could ever be */
max-height: 100px;
}
<div>
<p>First paragraph</p>
<p>Second paragraph</p>
</div>
<button
onclick="toggleSlide()"
>
toggle slide
</button>
I did this workaround for the navigation header in my React site.
This is the regular visible css class
.article-header {
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
}
This is the class that is attached to the div (when scrolled in my case)
.hidden {
top: -50px !important;
transition: top 0.5s ease-in-out;
}
You can use also
$('#youDiv').slideDown('fast');
or you can tell that the active div goes up then the called one goes down
$('.yourclick').click(function(e) {
var gett = $(this).(ID);
$('.youractiveDiv').slideUp('fast', function(){
$('.'+gett).slideDown(300);
});
});
Something like that.
I need height on the div 50px in default and it has to be changed to 300px onmouseover. I coded in below manner to implement it.
<style type="text/css">
#div1{
height:50px;
overflow:hidden;
}
#div1:hover{
height:300px;
}
</style>
<body>
<div id="div1"></div>
</body>
This code is working fine but as per CSS property on hover its immediately changing its height. Now, I need a stylish way like slowly expanding div onmouseover and contracting onmoveout. How to expand and contract div on hover?
There are a few approaches -- here is CSS and Jquery, which should work in all browsers, not just modern ones:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#div1").hover(
//on mouseover
function() {
$(this).animate({
height: '+=250' //adds 250px
}, 'slow' //sets animation speed to slow
);
},
//on mouseout
function() {
$(this).animate({
height: '-=250px' //substracts 250px
}, 'slow'
);
}
);
});
</script>
<style type="text/css">
#div1{
height:50px;
overflow:hidden;
background: red; /* just for demo */
}
</style>
<body>
<div id="div1">This is div 1</div>
</body>
#div1{
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
Easy!
In a "modern" browser, you can just apply a css transition effect:
#div1 {
-moz-transition: 4s all ease-in-out;
-ms-transition: 4s all ease-in-out;
-webkit-transition: 4s all ease-in-out;
-o-transition: 4s all ease-in-out;
}
This would apply a transition effect over 4 seconds with a ease-in-out easing for compatible firefox, ie, chrome/safari (webkit) and opera browser. Read more:
CSS Transitions
You can take this one step ahead and check if the current browser supports css transitions, if available, use them for animation and if not use a javascript animation script. Example for that:
BarFoos animations
You can use jQuery's .animate() This will act on any element with with a class of "tab", and will revert on mouse-out.
$('.tab').hover(function() {
$(this).stop()
$(this).animate({
height: '+=250'
}, 500)
}, function() {
$(this).stop()
$(this).animate({
height: '-=250'
}, 500)
})
You can use jquery's .mouseover http://api.jquery.com/mouseover/, .mouseout http://api.jquery.com/mouseout/, and .animate http://api.jquery.com/animate/ to perform that.
On the .mouseover event, you would animate the height to be 300px, and on the .mouseout event you would animate to 50px. Make sure you call .stop on the div before you call animate, otherwise you will have odd issues.
I'm coding a website and I'm trying to replicate the effect on the apple.com where when you click to focus the search field in the menu bar, and the search field expands and the rest of the menu bar shrinks to accommodate it.
I've been trying various tricks with jquery kwicks, and also simply expanding a text field using the animate function in jquery but the effect is not the same. If someone could get me on the right track I'd very much appreciate it!
Best
Daniel
this can be done by css only no need for javascript or anything...
#search input {
width: 100px;
-moz-transition: width 0.5s ease-out;
-webkit-transition: width 0.5s ease-out;
transition: width 0.5s ease-out;
}
#search input:focus {
width: 200px;
-moz-transition: width 0.5s ease-out;
-webkit-transition: width 0.5s ease-out;
transition: width 0.5s ease-out;
}
voila, thats it ;)
Taking a quick look at how Apple did it, it looks like their big move is this (I could be wrong - I'm rushing):
#globalheader #globalnav li {
display: table-cell;
width: 100%;
overflow: hidden;
}
This is a pretty unusual CSS display value, and clever on their part, forcing the <li>'s to work like <td>'s. This means that changing the width of one of the "cells" causes the others in the same "row" to adjust how much room they take out.
Long live (fake) table-based layout!
So, assuming that CSS is possible for you, and I'm not off base with my quick glance at their code, your only task is to animate the width of the search box - the rest should follow suit.
Not to over simplify things but what if in your css you float:right; this input box and then on focus you animate the box to the appropriate width like so:
CSS:
#inputtext{
float:right;
width:150px;
}
jQuery:
$("div#inputtext").focus(function(){
$(this).animate({width:'300px'}, 1000);
});
This is a fiddle for this.
http://jsfiddle.net/MenuSo/r4xq9gz2/
HTML:
<form id="expanding-form">
<input type="text" id="expanding-input" placeholder="">
<button type="submit">Search</button>
</form>
and CSS:
#expanding-form input{
width: 30px;
height: 30px;
-o-transition: width .5s ease;
-ms-transition: width .5s ease;
-moz-transition: width 0.5s ease-out;
-webkit-transition: width 0.5s ease-out;
transition: width 0.5s ease-out;
}
#expanding-form input:focus{
width: 200px;
}
CSS would be enough.