How to animate a div to appear and move above another div - javascript

I've got this script that I have been working on and I need it to fade in and move up by it's height. If I remove the .animate() it fades in so i'm guessing theres something wrong there.
function showDesc (){
$(".container-box").hover(function(){
$(this).find(".contain-desc").fadeIn('slow').animate({
'bottom':'130px'
}, {duration: 'slow', queue: false;}
},function(){
$(this).find(".contain-desc").fadeOut();
});
}
I do have to use the old fashioned way of onmouseover="" in the html and below is my complete code so far, thanks.
http://jsfiddle.net/silverlight513/KuJkY/

The error is here:
{duration: 'slow', queue: false;}
You have terminated the statement with a semi-colon(;)
Change it to:
{duration: 'slow', queue: false}
EDIT:
There were a couple more errors in your code. I have updated the function:
function showDesc (){
$(".container-box").hover(function(){
$(this).find(".contain-desc").fadeIn('slow').animate({
'bottom':'130px'
}, {duration: 'slow', queue: false});//This was not closed
},function(){
$(this).find(".contain-desc").fadeOut();
});
}

Related

slideup after fading out function

<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>

My code is not working properly

The code is set to on the start slide forward and after 500 its suppose slide back. Well the code does slide forward but the code does not slide back after the 500. The code is not written properly as it should slide back. Here is the code JSFiddle:
$("#slideout").animate({right:'0px'}, {queue: false, duration: "slow"}, function () {
timer = setTimeout(function () {
$("#slideout").animate({right:'-280px'}, {queue: false, duration: 500})
}, 500);
});
http://jsfiddle.net/wdvUQ/2/
If anybody can fix it up so that the code can slide back would be awesome.
Your issue is with the animate arguments
$("#slideout").animate({right:'0px'}, {queue: false, duration: "slow"}, function ()...
should be
$("#slideout").animate({right:'0px' , queue: false, duration: "slow"}, function ()...
You'll need to remove the closing/opening curly braces.

Jquery toggle not working properly?

I have a button that I want to click (in my case this is '.circle'). When I click it, I want the #data div to fade in then animate with a 'margin-top:50px'. Then when the user clicks the toggle button the second time it animates to 'margin-top:0px' then fades out.
However the problem I have run into is that when I click the toggle the third time I would expect it to run the first function again. But instead it does something weird and resets to a margin-top of 50px before the first function is run again.
I would really appreciate some help with this. Here is a JSFiddle I whipped up with identical code and you will see the problem i'm having after clicking it multiple times. Also another problem was when you click it for the first time it doesn't work, but works on the second click.
http://jsfiddle.net/sN8Tn/
Ill also post the bit of jquery below:
$(".button").click(function(){
$(".button").toggle(
function(){
$("#showme").fadeIn(500,
function(){
$("#showme").animate({ "margin-top" : "50px" }, 500, 'linear');
}
);
},
function(){
$("#showme").animate({ "margin-top" : "0px" }, 500, 'linear',
function(){
$("#showme").fadeOut(500);
}
);
});
});​
Remove the .click() function. The click is implied with the .toggle() function. jQuery .toggle() jsFiddle
$(".button").toggle(
function() {
$("#showme").fadeIn(500, function() {
$("#showme").animate({
"margin-top": "50px"
}, 500, 'linear');
});
}, function() {
$("#showme").animate({
"margin-top": "0px"
}, 500, 'linear', function() {
$("#showme").fadeOut(500);
});
});​

Jquery animation looping

I am trying to make this animation loop
$(".jquery_bounce").ready(function(){
$("img", this).animate({ marginLeft : '20px' } , {
duration: 200,
complete:function() {
$(this).animate({ marginLeft : '0px' } , {
duration: 200,
easing: 'easeInCubic',
});
}
});
})
});
<div class="example">
<h4>Bounce</h4>
<div class="jquery_bounce bounce">
<img src="images/bounceimg.png" class="bounceimg" />
</div>
</div>
Please help.
try this~
$(function(){
$.extend({
show:function(){
$(".jquery_bounce").ready(function(){
$("img", this).animate({ marginLeft : '20px' } , {
duration: 200,
complete:function() {
$(this).animate({ marginLeft : '0px' } , {
specialEasing: {
left: 'swing',
top: 'easeOutBounce'
}
});
}
});
})
}
});
setInterval("$.show()",1000);
});
Demo:
http://jsfiddle.net/VpKw2/
Why don't you use setInterval()?
Edit:
Your animation bounces once, then stops, because...
You trigger the margin=20 part.
Upon completeness, another animation is scheduled: margin=0.
That's it. It doesn't loop because nothing is rescheduled to happen after the first pass.
Read the documentation on setInterval(): it's a function that let's you call another function at fixed (in milliseconds) intervals.
If you still want to do it as above, you must fix the problem I pointed out. Try thinking your way around it, and I'll help if you can't figure it out :).
Cheers.
Setup a bounce function that will continue the animation, either moving the element left or right:
function bounce(elm, leftZero) {
var px = leftZero ? '0px' : '20px';
elm.animate({ marginLeft : px}, {
duration: 200,
complete:function(){
//Continue bouncing
setTimeout(function(){
bounce(elm, !left);
},1);
}
});
}
$(".jquery_bounce").ready(function(){
$("img", this).each(function(){
//Start bouncing
bounce($(this), false);
});
})
});

Jquery: everything works, but my function wont fire

Everything works just fine, but when I remove
{queue:false, duration: 800, easing: 'easeInOutQuart'}
from
$(".chapters_list").slideDown(
with a 500, it stops working. So if I don't want easing in my script, it will work fine, when I insert easing into the top function, like is shown below, it stops working. Why wont it allow me to have easing?
$('.article_book_title').click(function () {
if ($(".chapters_list").is(":hidden")) {
$(".chapters_list").slideDown({queue:false, duration: 800, easing: 'easeInOutQuart'}, function () {
doSlide($('UL.chapters_list li:first'))
});
} else {
$(".chapters_list").slideUp({queue:false, duration: 800, easing: 'easeInOutQuart'});
}
});
function doSlide(current) {
$(current).animate({
backgroundColor:'#d6f4aa', color:'#eee'
},40, function() {
$(this).animate({backgroundColor:'#252525', color:'#fff'}, 500)
doSlide($(current).next('li'));
});
}
The shortcut methods like slideUp dont take an object config as an argument.. they take the duration and the call back. If you want more advance options you have to use the animate method.
slideUp API

Categories