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.
Related
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>
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 want the background of the header to fade in after a number of pixel scrolled. With the code below i kinda get it but not much right! Any idea? thanks!
$(function () {
$(window).scroll(function () {
$(document).scrollTop() > 100 ? $('header').css({
"background": 1
}).fadeIn() : $('header').css({
"background": 0
}).fadeOut();
});
})
A combination of Miquel Las Heras and Owen 'Coves' Jones's answers, who both submitted a not completely on-topic or not complete answer.
Use background trasitions (CSS3) and jQuery simultaneously.
JSFiddle
jQuery
$(document).ready(function () {
$(window).scroll(function () {
if ($(document).scrollTop() > 100) {
$("header").addClass("scrolled");
} else {
$("header").removeClass("scrolled");
}
});
});
CSS
header {
background-color:blue;
-webkit-transition: background-color 700ms linear;
-moz-transition: background-color 700ms linear;
-o-transition: background-color 700ms linear;
-ms-transition: background-color 700ms linear;
transition: background-color 700ms linear;
}
header.scrolled {
background-color: red;
}
Update February 3rd, 2017
browser support is very good, and the less performing jQuery solution below should not be used. Browser support.
Cross-browser solution
If you want to make it more cross-browser compatible, you can try the color plugin. But from what I've tested, it has quite a bad performance.
JSFiddle
$(document).ready(function () {
$(window).scroll(function () {
if ($(document).scrollTop() > 100) {
$("header").animate({
backgroundColor: "red"
}, 200);
} else {
$("header").animate({
backgroundColor: "blue"
}, 200);
}
});
});
Don't forget the plugin itself:
//cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.js
First, as was mentioned in the other answer, you will need to include jQuery UI or the jQuery Color plugin for color animation.
Second, and this is just winging it, but give this the old college try:
$(function(){
$(window).scroll(function(){
var $scrollPercent = ($(document).scrollTop() / 100);
if($scrollPercent <= 1){
$('header').css({backgroundColor:'rgba(0,0,0,'+$scrollPercent+')'});
}
});
});
This should give you a gradual fade in based on the amount down the page you scroll. This means that if you scroll 50 px down, your background color opacity would be set to 50% (50 px down / 100 px height wanted). You can also easily change the amount of height that you want to scroll down to reach full opacity very easily this way.
EDIT So it turns out you just want to fade in the color after 100px ... not my gradual fade in. No problem.
Others have pointed out the wonderful (and much better) CSS3 way to do it ... create a transition effect, and add a class on scroll. I won't steal their thunder, but I shall provide an alternative that works back to ancient browsers too.
Add an additional line of HTML inside of your header at the top:
<div class="header">
<div class="headerBackground"></div>
<!-- other header stuffs -->
</div>
Then set its CSS as such:
.header {
position:relative;
}
.headerBackground {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color:rgb(0,0,0);
opacity:0;
filter:alpha(opacity=0); // for IE8 and below
}
Then use the following jQuery:
$(function(){
$(window).scroll(function(){
var $bg = $('.headerBackground');
if($(document).scrollTop() >= 100){
$bg.animate({opacity:1},500); // or whatever speed you want
} else {
$bg.animate({opacity:0},500);
}
});
});
This also has the added benefit of not requiring another library (jQuery UI / jQuery Color plugin). The downside is, of course, the non-semantic HTML. Like I said, just another alternative.
I prefer to create 2 css classes for this type of issues. One for when window is scrolled and one for when it's not:
header { background: transparent; }
header.scrolled { background: #f2f2f2; }
Then the javascript should be:
$(function () {
$(window).scroll(function () {
if($(document).scrollTop()>100){
$('header').addClass('scrolled');
}
else {
$('header').removeClass('scrolled');
}
});
})
your code is correct, but jQuery does not natively support color animation. you need a plugin or jquery-ui for that: http://jqueryui.com/animate/
EDIT: actually, your code is kinda wrong. you want to set the backgroundColor to something. background: 1 is invalid css:
so .css({'backgroundColor': 'red'}) and then .css({'backgroundColor': 'blue'})
If you don't need to support a lot of older browsers you can animate background colours with a combination of jQuery and css3 transitions:
Take the HTML:
<div id="myBox">Stuff here</div>
And the javascript:
var myBox = $('#myBox');
myBox.on('click', function (el) {
myBox.css('background-color', 'red');
}
Then click the element #myBox will change its background colour red. Instantly, with no fade.
If you also put in place the css code:
#myBox {
-webkit-transition: background-color 300ms ease-in-out;
-moz-transition: background-color 300ms ease-in-out;
transition: background-color 300ms ease-in-out;
}
Then any colour changes to the background will be faded over 300ms. Works on all latest version browsers, but not on IE 9 and below.
The solution that I ended up using is as follows:
I created a section that I'm fading in and out based on the scroll position.
CSS
.backTex {
width:100%;
height:500px;
margin-top:50px;
background-color: #myGreen;
//Height
transition: height 0.5s ease;
-webkit-transition: height 0.5s ease;
-moz-transition: height 0.5s ease;
-o-transition: height 0.5s ease;
-ms-transition: height 0.5s ease;
//Background-Color
transition: background-color 0.5s ease;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-o-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}
jQuery
$(document).scroll(function() {
var positionScroll = $(this).scrollTop();
if(positionScroll <= 499) {
$(".backTex").css("background-color", "#fff");
} else if (positionScroll > 500 && positionScroll < 1100) {
$(".backTex").css("background-color", "#2ecc71");
} else {
$(".backTex").css("background-color", "#fff");
}
});
As far as compatibility, I haven't noticed any issues between browsers as of yet. Please reply to my post if you experience any. Thanks!
I'm trying to apply a toggleClass but it isn't applying the new class.
What's going on?
Click
<div id="main" class="invisible">
Hi there
</div>
.invisible{
opacity: 0;
}
.visible{
opacity: 1;
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
transition: opacity 3s ease-in-out;
}
$(document).ready(function() {
$("#cf_onclick").click(function() {
$("#main").toggleClass("visible");
});
});
Here's the jsFiddle
http://jsfiddle.net/Gilgamesh415/grxQX/17/
If you mean your fiddle, you forgot to add jQuery library, in the top left of the jsfiddle window.
Check here
If you mean your website check you have the jQuery library loaded by adding <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> inside you head tags.
try this:
<script type="text/javascript">
$(document).ready(function() {
$("#s").click(function(){
$("#main").toggleClass("n");
});
});
</script>
<div id="main" class="m"></div>
<button id="s">click</button>
<style type="text/css">
.m
{ opacity:0;}
.n
{
width:100px;
height:100px;
border:2px solid yellow;
background:green;
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
transition: opacity 3s ease-in-out;
opacity: 1;
}
</style>
demo here:http://jsfiddle.net/65Hg4/1/
$("#cf_onclick").click(function(e) {
e.preventDefault();
$("#main").toggleClass("invisible").toggleClass("visible");
});
http://jsfiddle.net/grxQX/18/
And try using a self invoking anonymous function:
(function(){
.... //your code
}(jQuery));
instead of
$(document).ready(function(){...});
Since best practice is to load the scripts at the bottom of your page, just before the closing </body> tag, you don't need to check if the document has been loaded ($(document).ready()), it already has.
Like this http://jsfiddle.net/micka/94pNW/
I'm trying to understand if is possible to replicate the method animate in Jquery, using webkit animations
Assuming i have a div 50px by 50 px
using jquery I can easily resize and animate it using:
$('#mybox').animate({'width':'100px','height':'70px'}, 300)
// so from 50x50 it animates to 100x70
// the values 100 and 70 should ba dynamically
// input so i can create a function (Width,Height) to alter my box
I wonder how to do the same, if possible using CSS WebKit animations
PS. I dont need them to work in firefox, is just a project for a Safari/Chrome
You can use this CSS:
div.mybox {
width: 50px;
height: 50px;
background-color: red;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
Then you can update the width and height properties using jQuery:
$(document).ready(function() {
$("div.mybox").css({"width": "100px", "height": "70px"});
});
So, if the browser supports it, this will be animated. But, of course, consider putting these properties to a separate class and adding this class to the element. You can use the .addClass() function, like this.
$(document).ready(function() {
$("div.mybox").addClass("enlarged");
});
Or, for example, you can use it with the toggleClass function and the click event (the box will be enlarged when clicked, and will change to the normal size when click again).
$(document).ready(function() {
$("div.mybox").click(function() {
$(this).toggleClass("enlarged");
});
});
In this case, the properties should be defined in the CSS class.
div.mybox.enlarged {
width: 100px;
height: 70px;
}
Also, if you want the animation to happen on mouse over, then all you have to add is this:
div.mybox:hover {
width: 100px;
height: 70px;
}
Animations of this kind can be performed without using JS at all.
Also, you should read about CSS3 transition attribute and the transform functions (they can be usable in many cases). They are described here.
CSS3 will make this very easy for you! It will add a transition, and you can change the dimensions with :hover. Here's the sample div:
<div id="mydiv">
<!-- Div content goes here -->
</div>
So, your div is "mydiv". The rest is done in CSS3:
#mydiv {
width: 50px;
height: 50px;
background: #f34543;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
#mydiv:hover {
width: 100px;
height: 70px;
}
JSFiddle: http://jsfiddle.net/dakoder/ZGHLM/
That's it! It will resize it from 50x50px to 100x70px. Tested on Chrome, but not Safari, yet.
#keyframes animationName {
0% {width: 50px; height:50px}
100% {width: 100px; height:70px}
}
take a look at this:
http://www.css3files.com/animation/
You can use CSS animations and transitions with "dynamic" values by applying CSS as a new styleSheet or inline style as in this case:
http://jsfiddle.net/4zD74/