I'd like to apply animate() and slideUp() functions to the same element. Both functions would start at the same time but would end at different times. How can I achieve that?
If I do
$(el).animate(200);
$(el).slideUp(2000);
The slideUp function waits for animate function to finish.
Thanks
To run two fx at the same time, you can pass "queue: false" as an argument like this:
HTML:
<div class="el"></div>
CSS:
.el {
height: 100px;
width: 100px;
border: 1px solid black;
position: relative;
}
Javascript:
$('.el')
.animate({'left' : '100px'}, 500)
.slideUp({duration: 1000, queue: false});
This code will slide the element right for .5 seconds, while at the same time sliding it up for 1 second. Here's a jsfiddle showing this: http://jsfiddle.net/cWLvc/
Related
In my project I need to animate some element, change its height with animation and I'm not allowed to use jQuery. I'm having hard time converting the following code (only the animation part) to vanilla js:
jsfiddle
$("#button").click(function() {
$("#div").height(20).animate({
height: 50
}, 200);
})
Vanilla JS doesn't have any animation routines. To do this you'll need to write your own timers to update the properties of the element at the required intervals.
However a better alternative would be to do the animation in CSS and use JS to simply add a class to the element which triggers the animation, something like this:
document.getElementById('button').addEventListener('click', function() {
document.getElementById('div').classList.add('foo');
})
#div {
height: 20px;
width: 50px;
border: 1px solid red;
transition: height 0.2s;
}
#div.foo {
height: 50px;
}
<div id="div"></div>
<button id="button">animate height</button>
Note the transition rule on the #div is what is doing the animation magic here.
The method that I invoke:
vm.progress = function () {
$('.progress-line').width('100%').animate({ width: 0 }, 5, 'linear', 1000);
}
HTML:
<div class="progress-outer">
<div class="progress-line red"></div>
</div>
CSS:
.progress-outer {
position: relative;
height: 10px;
width: 100%;
}
.progress-line {
position: absolute;
height: 100%;
width: 0;
}
It has to animate progress bar from 100% to 0 in 5 secs. But it doesn't work. However, if I separate methods into two functions and invoke them by clicking on button (and only), it works.
You wrote wrong syntax to chaining animate function check the below code
setInterval(function () {
$(".progress-line").animate({width:
"100%"},5000).animate({width:"0%"},6000);
},5000);
Check working demo jsfiddle
For Time limit, you should use
$(".progress-line").animate({width: "100%"},5000); // time 5000 is in milliseconds
Here is the fiddle that may help you. I use background colors to show the animation
https://jsfiddle.net/simerjit/rgskzcj5/2/
Check jquery animate function details here... http://www.w3schools.com/jquery/eff_animate.asp
I know to use stop() function to force queuing operations. For instance,
$(seletor).stop().fadeIn();
It prevents multiple fade effects when user triggers the mouseenter or mouseouter events.
Now I want to use stop() function with setTimeout() function or something else to prevents multiple mimic queuing effects.
Here is HTML:
<div class="container">
<div class="inner"></div>
<div class="inner2"></div>
</div>
CSS:
.container{
width: 200px;
height: 400px;
overflow: scroll;
background-color: #ccc;
position: relative;
}
.inner, .inner2{
width: 10px;
height: 500px;
background-color: red;
}
.inner{
display: none;
}
.inner2{
position: absolute;
left: 10px;
top: 0;
background-color: green;
}
JS:
$(function(){
//$(".container").stop().on("scroll", function(){
$(".container").on("scroll", function(){
$(".inner").stop().fadeIn();
setTimeout(function(){
$(".inner").stop().fadeOut();
}, 1000);
});
});
And jsfiddle ftw:)
My purpose is to trigger the setTimeout function to hide the red part when user scroll the div. But as I said before, I do not know how to combine stop() and setTimeout() function together. The red part would fadein and fadeout many times with a sequence when scroll multiple times.
Please help me, many thanks!
If you want it to keep fading in/out, you should chain the .fadeIn().fadeOut()
Something like this may be more what you're looking for...
$(function(){
var ref = null;
$(".container").on("scroll", function(){
clearTimeout(ref);
$(".inner").stop().fadeIn();
ref = setTimeout(function(){
$(".inner").stop().fadeOut();
}, 1000);
});
});
This will keep tacking on fadin/out events for animation, then when you stop scrolling for a second, the stop/fadeout takes hold.
I am using jquery to slide images left inside a div set to hide overflows, and then remove the first image and append it to the end, so that I always have the same number of images in the list and they keep sliding left each time the function fires:
function xxx(){
var first = $('.ximg:first');
$('.ximg').animate({ left: '-=200'}, 2000, function(){ $('.ximg').css({left: '0'}); first.insertAfter($('.ximg:last'));});
}
setInterval(function(){ xxx () }, 8000);
<div style="position:relative; overflow:hidden; width: 400px; height: 150px;">
<div class="ximg" style="position: relative; width: 200px; min-height:150px; background:red"></div>
<div class="ximg" style="position: relative; width: 200px; min-height:150px; background:orange"></div>
<div class="ximg" style="position: relative; width: 200px; min-height:150px; background:green"></div>
<div class="ximg" style="position: relative; width: 200px; min-height:150px; background:yelow"></div>
</div>
But I only end up with 1 image in the container, the second only gets added when the function fires. I know there are read made plugins to do this kind of thing but I want it simple and prefer to try and write my own even thought I am relatively new with jquery !
http://jsfiddle.net/rgct2/6/
The container is 400 wide and as each div is 200 wide, there should always be 2 divs in view, even during animation when it will show a % of the first and 3rd divs.
A better way is probably to animate the width of the first element, so it doesn't require all elements to be animated.
function xxx() {
var origWidth = $('.ximg:first').width();
$('.ximg:first').animate({
width: 0
}, 2000, function() {$(this).insertAfter($('.ximg:last')).css({width: origWidth})});
}
There are also CSS problems with the elements. The parent element should have white-space: nowrap, so the elements are in the same line, even when they're not visible. The children elements should have display:inline-block, so they can be in a line (i.e. inline), and have configurable widths.
Another thing to be aware of is the space between <div>s. You need to make sure there is no unintentional spaces, which include newlines.
See the updated demo: http://jsfiddle.net/rgct2/7/.
Tested and its working, instead of use remove, use "detach"
function xxx(){
$('.ximg').css({left: '0'});
$('.ximg').animate({ left: '-=200'}, 2000, function(){ });
$('.ximg:first').detach().insertAfter( $('.ximg:last') );
}
So what I'm trying to do is getting a div with an animation to show up only when I hover a button. I want that div to be invisible until the page hovers it, and I want it to go back being invisible once the mouse is no longer hovering the button.
Also, I want to do this with JQuery since I've kept far away from it for too long.
JQuery Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#about').hover(function(){
$('#about_hover').stop(true, true).animate({
width: '150px',
opacity: '0.8',
}, 300);
}, function(){
$('#about_hover').animate({
width: '0px',
opacity: '0',
}, 300);
});
});
</script>
HTML Code:
<div id="about_hover">
<img src="images/hover.gif">
</div>
<img src="images/menu/about.png">
<br>
CSS:
#about_hover {
text-align: right;
width: 150px;
float: left;
margin: 5px 0px 0px 100px;
overflow: hidden;
}
I'm getting a few problems though. First of all, the image inside the div loads up with opacity at 100% and only goes to 80% after I hover it for the first time. After that, it fades away like it's supposed to but it doesn't show up again when I hover the button.
Any thoughts?
Thanks
Thanks!
How about using fadeTo or fadeToogle ?
Here's a small snippet made using fadeTo: http://jsbin.com/agojux ?
you can have a look at it's source here
Here is your code, but a little bit modified:
JS:
$('#about_hover').width(0);
$('#about').hover(function(){
$('#about_hover').stop(true, true).animate({
width: '150px',
opacity: '0.8',
}, 300);
}, function(){
$('#about_hover').animate({
width: '0px',
opacity: '0',
}, 300);
});
HTML:
<img src="http://www.placekitten.com/20/20/"><br>
<div id="about_hover"><img src="http://www.placekitten.com/80/80/"></div>
Honestly, it's probably best to use jQuery's on in this situation.. Your code would look something like this:
$("selector").on({
mouseenter: function () {
//fade in goes here
},
mouseleave: function () {
//fade out goes here
}
});
Hover is cool and all, but things can get messy with hover toggling. on makes this a snap. Also for your opacity's, I would probably use a fadeTo instead.
Here is the on documentation.