I have the below html
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<div id="vis"></div>
<style>li {position: relative;}</style>
On click I want to move the clicked item to the left 50px then slide it up then output how many list items are now visible in my div with the id vis.
If I do the below it counts 1 to many because the animation hasn't completed when I add the length see fiddle.
<script>
$("li").on("click", function () {
$(this).animate({
"left": "+=50px"
}).slideUp(300);
var visNum = $('li:visible').length;
$('#vis').text(visNum);
});
</script>
If I just do hide() I get the expected output in the vis div but don't get the animation I require. See Fiddle
<script>
$("li").on("click", function () {
$(this).hide();
var visNum = $('li:visible').length;
$('#vis').text(visNum);
});
</script>
and if I try a callback, I get a similar result to my first attempt. See Fiddle
<script>
$("li").on("click", function () {
$(this).animate({
left: "+=50px",
}, 300, function() {
$(this).slideUp(300);
var visNum = $('li:visible').length;
$('#vis').text(visNum);
});
});
</script>
What is the best way to do this so that after you click an item it animates left, slides up then outputs the remaining visible list items?
slideUp has a complete() callback. http://api.jquery.com/slideup/
<script>
$("li").on("click", function () {
$(this).animate({
"left": "+=50px"
}).slideUp(300, function(){
var visNum = $('li:visible').length;
$('#vis').text(visNum);
});
});
</script>
And for completion... http://jsfiddle.net/fjqmj/4/
Try this :
While taking visible li, just filter the current one with .not(this). This may not be the best approach but it works for you.
$("li").on("click", function () {
$(this).animate({
"left": "+=50px"
}).slideUp(300);
var visNum = $('li:visible').not(this).length;
$('#vis').text(visNum);
});
Demo
Related
<script>
$(function() {
$('#error').delay(1000).fadeOut(1000).slideUp();
});
</script>
I got part of it working, however it doesn't slide up after it has faded out.
EDIT:
I want the content below this div to slide after the div has faded out.. Code:
$(function() {
$('#error').delay(3000).fadeOut(2000).animate({
opacity: 0
}, "slow", function(){
$(this).slideUp();
});
});
it's still going up fast.
http://jsfiddle.net/XhXDq/3/
jQuery("#outer").animate({opacity: 0}, 1000).slideUp();
You first fadeout the element with animate, than on the callback (when the fade is completed), you do the slideUp.
$(function() {
$('#error').delay(1000).animate({opacity: 0}, 100, "linear", function() {
$('#error').slideUp();
});
});
Example: http://jsfiddle.net/4HT25/
Use fadeTo instead. To zero
<script>
$(function() {
$('#error').delay(1000).fadeTo(1000, 0).slideUp();
});
</script>
i want to activate a function on click on a div ... actually this animation starts #page load... and i want to click on a div to activate this animation.
this was my first Question: Question
How is this possible?
var $a = $(".a"),
$b = $(".b"),
$c = $(".c");
function anim1() {
$b.animate({width: 395}, {duration: 500, complete: anim2});
}
function anim2() {
$a.animate({top:"0px"}, {duration: 500});
}
anim1();
Here is the fiddle: FIDDLE DEMO
Try this:
$(".example").click(function() {
anim1();
});
JSFiddle
Hello I have two divs that fadeToggle with a timer as follows
<div id="div1">Hello</div>
<div id="div2" style="display:none;">World</div>
Javascript to make it toggle
$(document).ready(function(){
setInterval(ToggleDiv, 5000);
});
function ToggleDiv(){
$('#div1').fadeToggle("slow");
$('#div2').fadeToggle("slow");
}
Here is fiddle link http://jsfiddle.net/BnYat/
My issue is that the second div shows up before the first div is done toggle and then causes a jump up to the top.
If there a way to create a smooth transition from one div to the next without the jump effect happening?
A simple solution is to put both div elements in a single container, and position them absolutely:
<div id="container">
<div id="div1">Hello</div>
<div id="div2" style="display:none;">World</div>
</div>
#container div {
position: absolute;
}
Example fiddle
Alternatively, you could fade one out completely then fade the next in in the callback:
setInterval(ToggleDiv, 5000);
function ToggleDiv(){
$('#div1').fadeToggle("slow", function() {
$('#div2').fadeToggle("slow");
});
}
Example fiddle
$(document).ready(function(){
setInterval(ToggleDiv, 5000);
});
function ToggleDiv(){
$('#div1').fadeToggle("slow", function(){
$('#div2').fadeToggle("slow");
});
}
just use animate
$( "#div1" ).animate({
visibility:hidden
}, 5000, function() {
// Animation complete.
});
$( "#div2" ).animate({
visibility:visible
}, 5000, function() {
// Animation complete.
});
Try this
setInterval(ToggleDiv, 5000);
function ToggleDiv() {
var div = "#" + $('div:visible').attr('id');
var div2 = "#" + $('div:not(:visible)').attr('id');
$(div).fadeToggle("slow", function () {
$(div2).fadeToggle("slow");
});
}
DEMO
or
function ToggleDiv() {
if ($('#div1').is(':visible')) {
$('#div1').fadeToggle("slow", function () {
$('#div2').fadeToggle("slow");
});
} else {
$('#div2').fadeToggle("slow", function () {
$('#div1').fadeToggle("slow");
});
}
}
DEMO
Upon clicking on a textarea, I need it to change the height of the textarea to 60px and slide down at the same time so it all looks like one smooth animation.
Here's the JSFiddle: http://jsfiddle.net/MgcDU/6399/
HTML:
<div class="container">
<div class="well">
<textarea style="width:462px" placeholder="Comment..."></textarea>
</div>
</div>
Thanks. :)
The method you need is called animate() and is well documented.
Now for your fiddle, I wrote the jQuery code that demonstration the animate method plus the focus() and blur() methods:
jQuery(document).ready(function ($){
var element = $('.well textarea');
var orig_height = element.height();
var new_height = 60;
// onfocus event handler
element.focus(function (){
$(this).animate({height: new_height + 'px'});
});
// onblur event handler
element.blur(function (){
$(this).animate({height: orig_height + 'px'});
});
});
Something like this?
$('#comment').click(function() {
$(this).css('height', '60px');
});
It works much better as an animate...
$("textarea").on('focus',function (e, ui) {
$(this).animate({
height: "60px"
}, 1500);
});
jsFiddle Demo
$('#comment').click(function () {
$(this).fadeIn(3000, function() {
$(this).css('height', '60px');
});
$(this).focusout(function() {
$(this).css('height', '20px');
});
});
I have a function that when run, animates a div on my page and removes a class, what I want to do however is remove the class at the end of the height animation, is this possible with jQuery?
var el = $(this).find('ul li');
var img = $(this).find('ul li img');
$(this).removeClass('active');
//return false;
el.animate({height:'135px'}, 500);
el.css({
'background-position':'top left',
'background-size' : 'auto auto'
});
$(this).find('ul li img').animate({height:'270px'}, 500);
$(this).animate({height:'135px'}, 500);
img.attr('src', function(i, value) {
return value.substring(28);
});
There is a complete function that runs once the animation has completed. According to the jQuery docs for the animate function, you can use it like so:
el.animate({height:'135px'}, 500, function() {
//code to run when complete goes here
});
Use the complete call like this inside the .animate function:
complete: function() { your func u wanna call when ani is complete..; }