We Keep Coding

There is a javascript delay when hovering over images

I have four images on a page and when I hover over the image, I want a horizontal div to move up on the bar, and when the mouse pointer moves off of the image, I want it to slide back down. Now when I do this is works fine, however there seems to be a delay. Also, if I move back and forth repeatedly, the delay is more and the slider ends up going up and down on its own for a few seconds. Here is the code, please help!
$('.indexgall').on('mouseenter',function()
{
$(this).addClass('hoverimg');
$(this).children().animate(
{
top: 150
}, 600, function()
{
});
});
$('li').on('mouseleave',function()
{
$(this).removeClass('hoverimg');
$(this).children().animate(
{
top:250,
}, 600, function()
{
});
});

From your code, it doesn't look there should be a delay. Can you post a JSFiddle to show this problem in action?
To address the latter concern, you want to be using the JQuery stop() method to stop the animation by cleaning the animation queue.
This can be done, like so:
$(this).stop().animate({
width: 240
}, 500);
Check out this JSFiddle.

Use jQuery animation only for non-phone size devices

I have built and uploaded this site here for a client. I used the Twitter bootstrap and customized it. My issue is the navigation it has jquery to animate the links. However i want this to disable and revert to an vertical list when screen size drops to phone size.
I know bootstrap already has the media queries built in but how do i do this.
Check the site and shrink browser to mobile size and you will see the list button appears but the links are still the same inside.
Not sure if i have made my point very clearly but more more info please ask.
Thanks
Here is the code responsible for animation:
$(document).ready(function () {
//When mouse rolls over
$(".blue").mouseover(function () {
$(this).stop().animate({
height: '100px'
}, {
queue: false,
duration: 1200,
easing: 'easeOutBounce'
})
});
//When mouse is removed
$(".blue").mouseout(function () {
$(this).stop().animate({
height: '50px'
}, {
queue: false,
duration: 1200,
easing: 'easeOutBounce'
})
});
});

Try matchMedia() to apply an animation only on small viewports:
if (window.matchMedia("(max-width: 480px)").matches) {
/* do animation here */
}
Of course you can change 480px to whatever you want or even check for other properties.

JQuery ScrollTop glitches with fadeIn and fadeOut

I'm getting this horrible glitch (it sort of jumps or flashes) when using animate scrolltop with fadeIn and fadeOut. I've got a Div which is dynamically loaded with content. When the user clicks a menu button on the main page the page should scroll to the top and then begin to fadeout the div, then update the div with it's new content and then fade back in.
It works fine half the time but the other half it glitches out. I tried firefox, chrome and opera and they all have the same behavior.
function loadPage(url)
{
$("html, body").animate({ scrollTop: 0}, 500);
setTimeout(function (){ $('#centerBox').load(url); }, 1000);
$('#centerBox').fadeOut(1000);
$('#centerBox').fadeIn(1500);
}
Code Explanation:
So the above function will be called when a menu button is clicked. The main page will scroll to the top. The div's content has a timer so that's content is changed after the fadeout has fully completed but changed in enough time to be ready for the fadein.
I'm calling the loadPage(url) function using this:
<img src="buttons/newsWhite.png"/>

Try changing it to this instead:
function loadPage(url)
{
$("html, body").animate({ scrollTop: 0}, 500, function(){
$('#centerBox').fadeOut(1000, function(){
$('#centerBox').load(url, function(){
$('#centerBox').fadeIn(1500);
});
});
});
}
This will not load the url until the fadeOut animation is completed.

I seem to have solved my issue here.
$(document).ready(function(){
$('#news').click(function(){
$("html, body").animate({ scrollTop: 0}, 500, function(){
$('#all').fadeOut(1000, function(){
$('#centerBox').load('news.html', function(){
$('#all').fadeIn(1500);
});
});
});
return false;
});
});
I then called this using:
<img src="buttons/newsWhite.png" width="130" height="25"/>
I'm new to JavaScript and JQuery (as you can probably tell), do you think it could have something to do with not using document.ready()?

How do I do CSS transitions with jQuery UI tabs?

I want smooth transitions between tabs when the user clicks on a tab.
I know jQuery tabs supports basic animations (see this question about animation fx), but how can I do smooth transitions?

things got easier over the years, now it's a built in option for that, for example slide to-left-out and from-right-in is just:
$("#tabs .tabs-container-wrapper .tabs-container").tabs({
hide: { effect: "slide", duration: 800, direction: "left", easing: "easeInOutQuart" },
show: { effect: "slide", duration: 800, direction: "right", easing: "easeInOutQuart" }
});

You will need to do a few things to get this working:
Do not use the CSS that comes with jQuery UI
Structure your HTML so your tabs can slide left and right.
Add CSS for the "left" transition. For example:
#tabs .tabs-container-wrapper .tabs-container { transition:left 0.5s ease-in-out; }
When a tab is selected, change the "left" value.
$(function() {
var onTabChange = function(event, ui) {
$("#tabs .tabs-container-wrapper .tabs-container").css("left", offsets[ui.index]);
};
$('#tabs').tabs().bind('tabsselect', onTabChange);
});
See this gist for a full working example.
This will work with modern browsers that support transitions and fall back to normal tab behaviour if it's not supported.

jquery .animate() - this code sort of does what i want

I am trying to make a div slide down when the mouse moves over another div just above it. Basically the div above it is just the trigger that makes the div slide down. Mouseover of .trigger makes .slidedown expand, and mouseout of .slidedown makes itself slide back up. Here's the code i have so far:
$(document).ready(function() {
$('.slidedown').hide();
//When mouse rolls over
$('.trigger').mouseover(function(){
$('.slidedown').stop().animate({
height: ['toggle', 'swing'],
}, 600, function() {
// Animation complete.
});
});
//When mouse is removed
$('.slidedown').mouseout(function(){
$('.slidedown').stop().animate({
height:'0px'
}, 600, function() {
// Animation complete.
});
});
});
This works, but there are just two teaks i need help with. Firstly, after mouseout and the .slidedown div slides up and disappears, if i then mouse over the .trigger div again, nothing happens. It should make the .slidedown move down again. I need it to every time keep working. I tried removing the .stop() but it still doesn't work.
Also can i make it also slide back up if the mouse moves out of .trigger but only if it isn't moving out of .trigger into .slidedown? This is so incase the user doesn't move the mouse into .slidedown, it would remain forever which isn't good. Or just have a time limit that it can remain expanded if the mouse doesn't move over .slidedown.
Second, is there a way to make a delay of around 1 second between mouseout and the div sliding back up? Thanks for your help!

You might try using the jQuery hover event. For the delay, you can put the closing animation in setTimeout:
$(document).ready( function(){
$('.trigger').hover( function(){ // enter animation
$('.slidedown').stop(true,true).animate({
height: ['toggle', 'swing'],
}, 600, function() { /* animation done */ });
}, function(){ // leave animation
setTimeout( function(){
$('.slidedown').stop(true,true).animate({
height: '0px',
}, 600, function() { /* animation done */ });
}, 1000 );
});
});
You might also look into the hoverIntent plug-in for more nuanced control over the mouseenter/mouseleave behavior, including timing.

I think you'll find that setting a numerical height in $('.trigger').mouseover() may help the animation be repeatable. FYI, you can set an integer number for something like height or width in jQuery and it will automatically set the unit to px for you.
As Ken pointed out, setTimeout is useful for a delay in code, but keep it in your $('.slidedown').mouseout() event or the slideown div will hide after you mouseout of the trigger div instead of when you leave the slidedown div as you specified.