The animation itself is working but why isn't my complete function working?
fiddle: https://jsfiddle.net/jzhang172/5kfbw066/1/
$(".ok").animate({
height:"300px"
},{
duration:2000
}, {complete:function(){
alert('hey');
}
});
.ok{
background:blue;
height:100px;
width:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ok"></div>
complete is a property just as duration
$(".ok").animate({
height: "300px"
}, {
duration: 2000,
complete: function() {
alert('hey');
}
});
.ok {
background: blue;
height: 100px;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ok"></div>
complete callback should be passed as the method on the second param object to the animate(), not as a different object.
Updated Fiddle
$(".ok").animate({
height: "300px"
}, { // <--- Pass `complete` callback as part of this object.
duration: 2000,
complete: function() {
alert('hey');
}
});
$(".ok").animate({
height: "300px"
}, { // <--- Pass `complete` callback as part of this object.
duration: 2000,
complete: function() {
alert('hey');
}
});
.ok {
background: blue;
height: 100px;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ok"></div>
Or, it can also be passed as last parameter to animate
$(".ok").animate({
height: "300px"
}, 2000,
function() {
alert('hey');
}
);
$(".ok").animate({
height: "300px"
}, 2000,
function() {
alert('hey');
}
);
.ok {
background: blue;
height: 100px;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ok"></div>
Related
I am trying to alternate display between two containers on a page using fadeOut/fadeIn & slideUp/slideDown. I would like the transition from the first container to the second to look the same as the transition from the second to the first; they fade in/out respectively, the current container slides up and away, and the other slides up from below it, all simultaneously. The first button triggers the animation described, but when I use the second button to transition to the first element the first element suddenly pops into existence while fading in jerking the page down, the second fades out, but no slide occurs. Thanks for your help, and let me know if I can clarify for you!
var main = function () {
$('.button-1').click(function () {
$('.container-1').fadeOut({ duration: 1400, queue: false }).slideUp(1400);
$('.container-2').fadeIn({ duration: 1400, queue: false }).slideDown(1400);
});
$('.button-2').click(function () {
$('.container-2').stop(true, true).fadeOut({ duration: 1400, queue: true }).slideUp(1400);
$('.container-1').fadeIn({ duration: 1400, queue: false }).slideDown(1400);
});
$(document).ready(main);
you actually only need 1 button to do this if you animate the height and opacity with toggle. ive added it twice since your use case was for 2 buttons
js fiddle here
js
var main = function () {
$('.button-1').click(function () {
$('.container-1')
.stop(true, true)
.animate({
height: "toggle",
opacity: "toggle"
}, 1400);
$('.container-2')
.stop(true, true)
.animate({
height: "toggle",
opacity: "toggle"
}, 1400);
});
$('.button-2').click(function () {
$('.container-2')
.stop(true, true)
.animate({
height: "toggle",
opacity: "toggle"
}, 1400);
$('.container-1')
.stop(true, true)
.animate({
height: "toggle",
opacity: "toggle"
}, 1400);
});
}
$(document).ready(main);
html
<div class=container-1>container1</div>
<div class=container-2>container2</div>
<input type=button class=button-1 value=button1>
<input type=button class=button-2 value=button2>
css
.button-1 {
color: red;
}
.button-2 {
color: blue;
}
.container-1, .container-2 {
width: 100px;
height: 100px;
}
.container-1 {
background-color: green;
}
.container-2 {
display: none;
background-color: orange;
}
Not sure if this is what you want. But here is one way to switch between two containers with slide and fade at the same time:
HTML:
<input type="button" class="redclick" value="Red"></input>
<input type="button" class="blueclick" value="Blue"></input>
<div class="red"></div>
<div class="blue"></div>
CSS:
.red, .blue{
width:200px;
height:200px;
position: absolute;
}
.red{ background:red; }
.blue{ background:blue; }
Javascript:
$(function() {
$('.red').hide();
$('.blue').show();
$(".blueclick").click(function() {
if($('.red').css('opacity') == '1'){
$('.red').fadeOut({ duration: 1400, queue: false }).slideUp(1400);
$('.blue').slideDown({ duration: 1400, queue: false }).fadeIn(1400);
}
});
$(".redclick").click(function() {
if($('.blue').css('opacity') == '1'){
$('.blue').fadeOut({ duration: 1400, queue: false }).slideUp(1400);
$('.red').slideDown({ duration: 1400, queue: false }).fadeIn(1400);
}
});
});
JSFiddle Demo
Hope this helps.
.dropped
{
position: static !important;
}
#dvSource
{
padding: 5px;
min-height: 100px;
width: 470px;
margin-top: 300px;
}
#dvSource img {
padding-left: 10px;
}
.one {
left: 20px;
}
.nodrop {
padding-left: 20px;
}
#dvDest
{
background:url(images/line_background.png);
min-height: 100px;
width: 110px;
float: left;
margin-left: 20px;
}
#dvDest1
{
background:url(images/line_background.png);
display: inline-block;
min-height: 100px;
width: 110px;
margin-left: 10px;
}
#dvDest2
{
background:url(images/line_background.png);
display: inline-block;
min-height: 100px;
width: 110px;
margin-left: 10px;
}
#otherimgs {
float: left;
}
.allcontent {
width: 700px;
margin-top: 120px;
}
.contain {
text-align: center;
}
.contain img {
margin-left: 20px;
}
.popup {
position: absolute;
top: 280px;
right: 480px;
}
.popup img {
width: 435px;
height: 134px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
function hideerror() {
$('.popup').remove();
}
$(function () {
$("#dvSource img.one").draggable({
revert: function () {
$(this).delay(600);
return true
},
revertDuration: 500,
refreshPositions: true,
stop: function (event, ui) {
$("body").append('<div class="popup"><img src="images/tryagain.png"></div>'); setTimeout(function(){hideerror()},1200);
}
});
$("#dvSource img.one1").draggable({
revert: function () {
$(this).delay(600);
return true
},
revertDuration: 500,
refreshPositions: true,
stop: function (event, ui) {
$("body").append('<div class="popup"><img src="images/tryagain.png"></div>'); setTimeout(function(){hideerror()},1200);
}
});
$("#dvSource img.one2").draggable({
revert: function () {
$(this).delay(600);
return true
},
revertDuration: 500,
refreshPositions: true,
stop: function (event, ui) {
$("body").append('<div class="popup"><img src="images/tryagain.png"></div>'); setTimeout(function(){hideerror()},1200);
}
});
$("#dvDest").droppable({
accept: '#dvSource img.one',
drop: function (event, ui) {
if ($("#dvDest img").length == 0) {
$("#dvDest").html("");
}
ui.draggable.addClass("dropped");
$("#dvDest").append(ui.draggable);
$("body").append('<div class="popup"><img src="images/greatwork.png"></div>'); setTimeout(function(){hideerror()},1300);
$( this ).hideerror();
}
});
$("#dvDest1").droppable({
accept: '#dvSource img.one1',
drop: function (event, ui) {
if ($("#dvDest1 img").length == 0) {
$("#dvDest1").html("");
}
ui.draggable.addClass("dropped");
$("#dvDest1").append(ui.draggable);
$("body").append('<div class="popup"><img src="images/greatwork.png"></div>'); setTimeout(function(){hideerror()},1300);
$( this ).hideerror();
}
});
$("#dvDest2").droppable({
accept: '#dvSource img.one2',
drop: function (event, ui) {
if ($("#dvDest2 img").length == 0) {
$("#dvDest2").html("");
}
ui.draggable.addClass("dropped");
$("#dvDest2").append(ui.draggable);
$("body").append('<div class="popup"><img src="images/greatwork.png"></div>'); setTimeout(function(){hideerror()},1300);
setTimeout(function() {
window.location.href = "6.htm";
}, 1500);
$( this ).hideerror();
}
});
});
</script>
<div class="allcontent">
<div id="otherimgs">
<img alt="" src="images/large_ball.png" />
<img alt="" src="images/medium_ball.png" />
<img alt="" src="images/small_ball.png" />
</div>
<div class="contain">
<div id="dvDest"></div>
<div id="dvDest1"></div>
<div id="dvDest2"></div>
</div>
</div>
<div id="dvSource">
<img class="one" alt="" src="images/large_ball.png" />
<img class="one1" alt="" src="images/medium_ball.png" />
<img class="one2" alt="" src="images/small_ball.png" />
</div>
here i have made 3 elements droppable to their respective destination place ..i want to redirect the page to another only when all the 3 elements are dropped in their places..how to find whether the element is dropped.. can anyone help me with this??
check this fiddle for demo http://jsfiddle.net/karthikchandran/stxzqskq/3/
Fiddle Demo
try this
function checked()
{
var i = 0;
if($("#dvDest").children("img").hasClass("dropped"))
{
i++;
}
if($("#dvDest1").children("img").hasClass("dropped"))
{
i++;
}
if($("#dvDest2").children("img").hasClass("dropped"))
{
i++;
}
console.log(i);
if(i ==3)
{
window.location.href="http://google.com";
}
}
create a checked() function and call it on each droppable function
it will get redirected to the given linked as shown in fiddle demo but in fiddle it won't get redirect.
You can use jQuery to count the number of elements that are dropped:
var count = $(".dropped").length;
You can check this and perform an action if the expected number are dropped:
if (count === 3) { ... }
I have two problems,
1) I have a div that expands onclick, (.panel) how can I use easing on it so it opens in a smooth way?
2) how can I make the ul list within the expanding div (.panel) fade in a few mili seconds after the div has expanded?
<div id="effect" class="mores" style="background-color: brown">
<div class="panel">click
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
JS
var next_move = "expand";
$(document).ready(function () {
$(".panel").click(function () {
console.log(next_move);
var css = {};
if (next_move == "expand") {
css = {
width: '210px',
height: '170px'
};
next_move = "shrink";
} else {
css = {
width: '30px',
height: '20px'
};
console.log('hi');
next_move = "expand";
}
$(this).animate(css, 200);
});
});
.panel {
width: 30px;
height: 21px;
overflow: hidden;
color:white;
background-color: grey;
}
.panel ul {
margin-left:10%;
color:white;
}
.mores {
width: 210px;
height: 170px;
overflow: hidden;
}
here is the fiddle JSFiddle
Many Thanks
I tried something, tell me if that's what you expected. http://jsfiddle.net/z2p0r5s9/11/
<div id="effect" class="mores" style="background-color: brown">
<div class="panel">click
<ul style="display:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
CSS
.panel {
width: 30px;
height: 21px;
overflow: hidden;
color:white;
background-color: grey;
transition: all 2s ease;
}
JS
var next_move = "expand";
$(document).ready(function () {
$(".panel").click(function () {
console.log(next_move);
var css = {};
if (next_move == "expand") {
css = {
width: '210px',
height: '170px'
};
next_move = "shrink";
setTimeout(function(){
$('ul').fadeIn();
},2000);
} else {
css = {
width: '30px',
height: '20px'
};
console.log('hi');
next_move = "expand";
}
$(this).animate(css, 200);
});
});
is this what you pretend?
var next_move = "expand";
$(document).ready(function () {
$(".panel").click(function () {
console.log(next_move);
var css = {};
if (next_move == "expand") {
css = {
width: '210px',
height: '170px'
};
next_move = "shrink";
} else {
css = {
width: '30px',
height: '20px'
};
console.log('hi');
next_move = "expand";
}
$(this).animate(css, 200, function(){
setTimeout(function() {
$(".options").fadeIn()
}, 75);
});
});
});
http://jsfiddle.net/lycrest15/z2p0r5s9/2/
It is using default easing but you can change it to the proper way you want. Just see documentation here: http://api.jquery.com/animate/
i am having a hard time trying to animate this box, so the changes go smooth, but i just cannot figure out how to keep everything together. Help would be really appreciated. (already tried with 'switchClass') Here is the whole code:
<script src="jquery.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<style>
#box {
position: relative;
margin: auto;
padding: auto;
display: block;
width: 167px;
height: 167px;
}
#box .item {
position: relative;
margin: 0;
display: block;
width: 100%;
height: 33%;
cursor: pointer;
}
#box .over {
height: 84%;
}
#box .other {
height: 8%;
}
#top {
background: red;
}
#mid {
background: green;
}
#bot {
background: blue;
}
</style>
<script>
function anim(item) {
$('.item').attr('class', 'item other');
$('#' + item.id).attr('class', 'item over');
}
function clean() {
$('.item').attr('class', 'item');
}
</script>
<div id='box' onmouseout="clean()">
<div id='top' class='item' onmouseover='anim(this)'></div>
<div id='mid' class='item' onmouseover='anim(this)'></div>
<div id='bot' class='item' onmouseover='anim(this)'></div>
</div>
edit: this code is running just fine, but its just an example of final output (just some animations needed)
Maybe this is not super cool, but seems to do job:
var $items = $('.item').on({
mouseover: function () {
$items.removeClass('over other');
$items.stop().filter(this).animate({height: '84%'}, function () {
$(this).addClass('over');
})
.end().not(this).animate({height: '8%'}, function () {
$(this).addClass('other');
});
},
reset: function() {
$items.removeClass('over other').stop().animate({height: '33%'});
}
});
$('#box').mouseout(function() {
$items.trigger('reset');
});
http://jsfiddle.net/dfsq/4vnkh/1/
If you want to animate the change, please take a look at jQuery animate
Something like this:
$('.item').mouseenter(function() {
$('.item').animate({
height: 80%
}, 500, function() {
// Animation complete.
});
});
$('.item').mouseleave(function() {
$('.item').animate({
height: 33%
}, 500, function() {
// Animation complete.
});
});
in this case you don't need onmouseout or onmouseover
If your animation is based solely on CSS class attributes why not use CSS3 hover pseudo-selector?
Example:
.box {
width: 200px;
}
.box:hover {
width: 400px;
}
<div class="box">Hover over me!</div>
Additional: Response to comments
If you are looking for custom animation duration you can use a callback function with a duration for the initial function call. Here's an example:
$('#div').animate({
width: '200px',
color: 'blue'
}, 5000, function() {
// Animation finished after 5 seconds.
alert("Animation complete!");
});
Addition #2
Your problem child is this little guy:
$('.item').attr('class', 'item other');
This sets each box to 8% height and THEN expands the primary animating box. Remove this and your #box will remain the same height throughout all animations!
I have two divs named "arrow" and "inner". I am trying to control the animate slide function when the div is clicked but have been unfortunate. The issue is noticeable when clicking very fast on the "arrow" div after user stops clicking the div is still sliding. I set the animate function under a small delay but I still experience lag. Here is my example code:
<script language="javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
<script language="javascript">
$(document).ready(function() {
var out = 0;
$("#arrow").click(function(){
if(out==0)
{
$("#inner").animate({marginRight: "0px"}, 500 );
out=1;
}
else
{
$("#inner").delay(400).animate({marginRight: "-100px"}, 500 );
out=0;
}
});
});
</script>
<div style="background-color: rgb(204, 204, 204); height: 300px; width: 300px; overflow: hidden; position: relative;">
<div id="inner" style="height: 100px; width: 150px; background-color: rgb(0, 204, 102); float: right; margin-right:-150px;" >Form is here</div>
<div id="arrow" style="height: 100px; width: 50px; background-color: rgb(255, 0, 0); float: right; cursor: pointer; position: absolute; top: 0; right: 0;" >Arrow is here</div>
</div>
Just change your code
$("#inner").animate({marginRight: "0px"}, 500 );
to
$("#inner").stop(true, true).animate({marginRight: "0px"}, 500 );
and
$("#inner").animate({marginRight: "-100px"}, 500 );
to
$("#inner").stop(true, true).animate({marginRight: "-100px"}, 500 );
Please see following Link for example : http://jsfiddle.net/UAYTw/1/
you can also use $("#inner").stop(true, false).animate() instead of $("#inner").stop(true, true).animate(). as per your choice.
Using Ravi's code props to him - toggle is cleaner in my opinion
DEMO
$(document).ready(function() {
$("#arrow").toggle(
function(){
$("#inner").stop(true, true).animate({marginRight: "0px"}, 500 );
},
function(){
$("#inner").stop(true, true).animate({marginRight: "-100px"}, 500 );
}
);
});
You can use .animate().stop() method to stop the animation.
Demo: http://jsfiddle.net/YKn7c/
this may help:
$("#button").hover(
function () {
$("#effect").stop().animate({ opacity: '1', height: '130' }, 300);
},
function () {
$("#effect").stop().animate({ opacity: '0', height: '130' }, 300);
}
);
edited:
If You dont want to be closed:
$("#button").hover(
function () {
$("#effect").stop().animate({ opacity: '1', height: '130' }, 300);
},
null
);