Problem with transitions

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

Problem with transitions

kellerwerks
Hi all,

First time posting.

I currently am using Jquery to achieve some transitions in a target div when buttons are hovered over. The simple transitions are working fine on my dev site, as you can see here:
Dev Site.

I would like to add some fading in and out to those transitions, but there are two problems I run into when doing so: 1. Everything below the target div briefly "jumps" up to where it shouldn't be, making for a less than smooth transition. 2. The correct info does not always populate my target div. The Dev site above has the everything populating correctly. The one I'm about to post does not.

You can see both problems I'm talking about here:
Dev Site 2

This is what my problem JS file looks like:

google.load('jquery',
'1.4.2');
google.setOnLoadCallback(function(){

$('#link1').hover(function(){
$('#target').fadeOut('slow', function (){
$('#target').load('rote1.html', function (){
$('#target').fadeIn('slow');
});
});

});



$('#link2').hover(function(){
$('#target').fadeOut('slow', function (){
$('#target').load('rote2.html', function (){
$('#target').fadeIn('slow');
});
});

});


$('#link3').hover(function(){
$('#target').fadeOut('slow', function (){
$('#target').load('rote3.html', function (){
$('#target').fadeIn('slow');
});
});

});


$('#link4').hover(function(){
$('#target').fadeOut('slow', function (){
$('#target').load('rote4.html', function (){
$('#target').fadeIn('slow');
});
});

});








});


Thanks for any suggestions -
Mike