We Keep Coding

I want the radius of my button to change back on mouseleave

I'm having a problem with the radius of my button. When I click on it the radius of it goes from 50% to 0 so it looks fluently with the panel, but when I mouseleave it doesn't change back.
I've been searching the web for a few days now but I can't find anything on my specific problem.
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").fadeToggle("fast");
if($(this).is(".radius")) {
$(this).removeClass("radius");
return;
}
$(this).addClass("radius").siblings().removeClass("radius");
});
});
$("#Left").mouseleave(function() {
$("#panel").hide();
});
I'm a complete noob at javascript as you can see haha

Maybe something like this? It's a bit hard to tell without a running example of your code, throw it up on jsfiddle if you can.
$("#Left").mouseleave(function() {
$("#panel").hide();
$('#flip').addClass('radius').siblings().addClass('radius');
});

jQuery UI Slide - Move content during animation

I'm building a website which relies on jQuery effects and I have a problem with the jQuery Slide effect.
I'm using that through a toggle function for the moment, but that will change in a later stage.
The fact is that I'm hinding an element when a certain action is executed. When you use the function slide the content beneath those elements moves when the animation is completed to take up the free space which was created with the effect.
The problem is that the content is only moved as soon as the animation is completed. Is there any way to move the content when the animation is still running. With other words, I want to move the content together with the animation, but I don't want to call the slide function on my element that should move with it.
I've created a JSFiddle to demonstrate the problem: http://jsfiddle.net/6Lg9vL8m/6/
Edit: Question update and fiddle
Here's an update to the question, and please see my original updated fiddle.
When you execute the slide effect in jQuery UI, see the bottom example on my fiddle, the box is moved up, and is somewhere placed behind an invisible screen (tough to explain).
With the animate function, see the top example in my fiddle, the area is shrinked, and that's something which I want to avoid. I want to achieve the effect such as 'Slide' does, but the content under the box must move up immediately with the animation, and not after the animation has been completed.
Edit: Reworked the correct answer in a plugin.
Thanks to the answers I've received here, I found the correct code, modified a bit, and created a plugin from it which I'll place here.
The plugin is called 'Curtain' and can be described as rising the requested element as a curtain and thus move it out of the way.
Here's the source code:
(function($) {
$.fn.curtain = function(options, callback) {
var settings = $.extend( {}, $.fn.curtain.defaults, options);
var tabContentsHeight = $(this).height();
$(this).animate({height:0}, settings.duration);
$(this).children().animate({'margin-top':'-' + tabContentsHeight + 'px'}, settings.duration, function() {
$(this).css({"margin-top":0});
if ($.isFunction(callback)) {
callback(this);
}
});
return this; // Allows chaining.
};
$.fn.curtain.defaults = {
duration: 250
};
}(jQuery));
The plugin can be called like this:
element.curtain({ duration: 250 }, function() {
// Callback function goes here.
});
If someone has remarks or a better way to solve this problem, please share it in the comments.

You can do it by using the animate function like this:
$('#square').on('mousedown', function(e) {
$(this).animate({height:-200},2500);
});
Demo
Updated code to create a "curtain raising" like animation:-
$('#square').on('mousedown', function(e) {
$(this).animate({height:-200},2500);
$(this).children().animate({"margin-top":"-400px"},2500, function() {
$(this).css({"margin-top":0})
});
});
CSS:
`#square{
overflow:hidden;
}`
Demo 2

This is the effect you wanted?
$('#square').on('click', function(e) {
$(this).animate({height :0},2500 );
});

how to scroll to an anchor point with smooth animation adobe edge

I can't find this seemingly simple answer. I am trying to make an animated button on my site scroll to an anchor point on my site(it's just one huge page)
The code I currently have in the code snippet box in edge doesn't work. It's kind of frustrating because with edge you're not entirely sure where your code is being thrown into the end result.
// insert code for mouse click here
window.scrollTo(0,0);
//want it to scroll to #Main
most of the code in edge starts you off with:
sys.someAction()
Here's my site if you want to look at what I'm trying to do:
www.daniellachman.com
Thanks!
Edit: Here is the full code snippet, provided with the code supplied below:
//Edge binding end
//CUSTOM CODE FROM Monty82
function scrollToTag(tagName) {
var myTag = $("a[name='"+ tagName +"']");
$('html,body').stop(false,false).animate({scrollTop: myTag.offset().top}, 'slow');
}
//Edge binding end
//Original Mouse Clicking Function Provided by Edge
Symbol.bindElementAction(compId, symbolName, "${_newlogoheader}", "click", function(sym, e) {
// insert code for mouse click here
//Stuff I added to call custom function above
sym.scrollToTag("main")
});
It didn't work. But I feel like I'm on the right track.
www.daniellachman.com
If anyone knows how to look at the javascript for the menu nav buttons "about" "contact" and see what that is referencing for the scroll. I'd love to hear it.

This function in JavaScript/jQuery may help you:
function scrollToTag(tagName) {
var myTag = $("a[name='"+ tagName +"']");
$('html,body').stop(false,false).animate({scrollTop: myTag.offset().top}, 'slow');
}
The parameter is the name (not the id but the name) of the anchor to which you want to scroll.
Notice that the function is designed for vertical scrolling, your site seems to require vertical and horizontal, so you may need to use scrollLeft too.

Fixing Javascript animation timings in inactive tabs with real time fix

So I have a fiddle with two pulsing animations running at different times.
http://jsfiddle.net/JuFxn/16/
The code for the pulse is here. There is more in the fiddle so please check it out.
function fadeItIn() {
var child;
child = 4;
setTimeout(fadeIn, 3000);
function fadeIn() {
$("#child" + child).fadeIn(175);
--child;
if (child >= 0) {
// Continue fading in
setTimeout(fadeIn, 175);
} else {
// Start fading out
++child;
setTimeout(fadeOut, 175);
}
}
function fadeOut() {
$("#child" + child).fadeOut(175);
++child;
if (child <= 4) {
// Continue fading out
setTimeout(fadeOut, 175);
} else {
// Start over again
setTimeout(fadeIn, 3000 - 1575);
}
}
}
The issue I'm having is that when the tab becomes inactive, the timings of the two pulses desync and go off pretty far from each other. I did some research and found this
How can I make setInterval also work when a tab is inactive in Chrome?
They seem to fix the problem by implementing a real world counter in and adding the value of the counter during each cycle and having the div move based on the distance generated by the counter. Would implementing something like that fix the problem I am having? How would I even use it? I think the problem is arising from the use of the setTimeout on the second function.
setTimeout(fadeItInDoom, 500);
If I take out the setTimeout and make it so the two pulses execute at the same time, the timings never go off.

So I ended up figuring out a fix to make it stay in sync.
http://jsfiddle.net/bwCmk/
I changed the animation code entirely so that it is running in jQuery. The fix however comes in how I dealt with changing to the next animation. I just made a different function for each pulsing element and had the next one called at the end of the previous function. So:
FunctionA {
code
functionB();
}
FunctionB {
code
functionC();
}
etc
it worked. Just putting this up so that if anyone else makes something along these lines, they can find a fix for it. Thanks to everyone who answered.

Scrolling content right to left Javascript

I have a page with a horizontal width of 4000px
How would i go about creating an event that starts as soon as the page loads and cycles from the far right to left of the page? I want to show all the content and get the user back to the start if you get me
Ideally coded in javascript but will accept CSS3 (if it can be done)
Thanks Guys,
DIM3NSION
Based on your responses i have tried to get this working, but with no avail.
Help much appreciated
<script type='text/javascript'>
$(document).ready(function(){
function start(){
document.body.scrollTo(4000, 0);
var x=4000;
var t= setInterval(function(){ x-=50
if (x<=0){ clearInterval(t); document.body.scrollTo(0,0); return; } document.body.scrollTo(x, 0); }, 20) }
});
</script>

The jQuery scrollTo plugin does exactly what you need. See it in action. Combined with the setTimeout or setInterval function, you could easily achieve your goal.

I'm not sure if this would work for an entire page, but it could be slicker than using the built in browser scrollbars, and easier to set up, to boot: http://logicbox.net/jquery/simplyscroll/

There's probably some errors in this code, since I'm typing it on my phone, but something like this should work. Just stick it in a window.onload function.
function start(){
window.scrollTo(4000, 0);
var x=4000;
var t = setInterval(function(){
x-=50; // or whatever
if (x<=0){
clearInterval(t);
window.scrollTo(0,0);
return;
}
window.scrollTo(x, 0);
}, 20)
}