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/
Related
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 have a div element with background image, I'm trying to fade in and out background images with Jquery.
By now the function works well but it fades out the whole div and not only the background as I wish.
function rentPics()
{
$('#d2').css('background-image','url(' + mazdaArr[1] + ')');
interID=setInterval (changeImage,3000);
}
function changeImage()
{
$('#d2').animate({opacity: 0}, 1500, function(){
$('#d2').css('background-image', 'url(' + mazdaArr[x] + ')');
}).animate({opacity: 1}, 1500);
x++;
if (x==mazdaArr.length)
{
x=1;
}
}
If you're looking for a simple and lightweight cross-fading, use the CSS transition. This won't affect the text inside the element, the border and the box-shadow.
transition: background-image 1s ease-in-out;
-webkit-transition: background-image 1s ease-in-out;
-moz-transition: background-image 1s ease-in-out;
-ms-transition: background-image 1s ease-in-out;
-o-transition: background-image 1s ease-in-out;
Check out this fiddle.
It's supported by Chrome, Safari and Opera but I'm not quite sure with Firefox and IE
If you have a larger list of images to loop. You may also want to consider caching the images URL first because I noticed some flickering/blinking on first use. Check solutions here - Preloading CSS Background Images
The fade in applies opacity to the entire div with the background image incluide, you can do this creating a layer behind the div that you want apply the fade in and fade out.
Instead of using jQuery to animate opacity, you could have it add or remove a class. Then add transitions to your CSS, which should produce your desired result. Something like below might work. You can see the documentation of CSS transitions here. The only drawback is IE, per usual.
.element {
-webkit-transition: ease 0.2 all;
-moz-transition: ease 0.2 all;
-o-transition: ease 0.2 all;
-ms-transition: ease 0.2 all;
transition: ease 0.2 all;
}
Use a relative container with an absolute positioned overlay. Your HTML should look like this:
<div id="d2" class="image-wrapper">
<img src="/img/1.jpg" />
<div class="overlay"> your text goes here </div>
</div>
... and your CSS:
.image-wrapper {
position: relative;
}
.image-wrapper .overlay {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: auto;
}
.image-wrapper img {
display: block;
}
Now you can change the opacity of your image without changing the content within the ovelay.
I'm trying to animate a page element using CSS transition on opacity property. Fading out works properly, but Fading in doesn't. What am I doing wrong?
Some facts are really strange:
Without using .no-display class everything works as expected (but I should use it).
Replaying function's commands in browser console does work as expected (but function does not).
The code:
HTML
<p>Fade in</p>
<p>Fade out</p>
<div class="no-display invisible" id="square"></div>
CSS
.no-display {
display: none;
}
.invisible {
opacity: 0;
}
#square {
width: 500px;
height: 500px;
background-color: red;
border: 1px solid black;
-webkit-transition: opacity 2s ease;
-moz-transition: opacity 2s ease;
-ms-transition: opacity 2s ease;
-o-transition: opacity 2s ease;
transition: opacity 2s ease;
}
JavaScript
function fadeIn() {
square.classList.remove("no-display");
square.classList.remove("invisible");
}
function fadeOut() {
square.classList.add("invisible");
setTimeout(function() { square.classList.add("no-display"); }, 2000 );
}
Or: http://jsfiddle.net/V2Sar/6/.
Note, I can't use any frameworks such as jQuery. I have to work only with pure JavaScript.
The easy way to trigger CSS transitions with JS is to toggle classnames, and the easy way to do that is through the classList API.
js
var square = document.getElementById("square");
function fadeIn() {
square.classList.remove("invisible");
}
function fadeOut() {
square.classList.add("invisible");
}
css
#square {
opacity: 1;
transition: opacity 2s ease;
}
#square.invisible {
opacity: 0;
}
http://jsfiddle.net/V2Sar/5/
Also, make sure your scripts are at the end of the <body> so you don't need to worry about whether the DOM is constructed yet (separate option in jsfiddle for this).
The browser support isn't great (no support in IE9) but there is a shim available at https://github.com/eligrey/classList.js
Let me know if this isn't good enough for you and I'll post some alternatives as well.
The only problem is "display: none;". Simply replace it with 'visibility: hidden'.
The reason is that 'display: none' doesn't build the resulting element in the DOM. As such, it cannot fade in something that does not exist. When its created, its created in a visible way.
'visibility: hidden', however, does build the resulting element in the DOM, simply doesn't show it. Because it exists, it can fade in when required.
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.