Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 777
  • Last Modified:

Smooth Jquery Transitions

Hey Experts!!

I have this page here: http://rdsrc.us/vAOdbc 

The jquery transition is sloppy and it also is showing the first image for a second while the other one is loading.  I've tried a Jquery CSS image preloader.  However, I don't think it's working correctly.

How can I clean up the transitions as well as negate showing the 1st background image while another one is loading.  
0
LZ1
Asked:
LZ1
  • 14
  • 12
3 Solutions
 
leakim971PluritechnicianCommented:
you may embed each image in each page and use jquery tabs, for example : http://www.designchemical.com/blog/index.php/jquery/simple-tabs-with-ajax-and-jquery/


$.ajax({
    "url":toLoad,
    success:function(html) {
       $("#slide-container").empty().append(html);
    }
});

Open in new window

0
 
LZ1Author Commented:
Where can I put that inside of my current script?
0
 
leakim971PluritechnicianCommented:
Check section << 2. The jQuery Code >> you will see an ajax call. This is your version.

You put it inside $('#nav li a').click(function(){
the same way you did it with your load : $('#slide-container').load(toLoad)
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LZ1Author Commented:
I implemented your code leakim. Would you be able to check for me that it's working correctly and that I've implemented the code correctly as well.
0
 
leakim971PluritechnicianCommented:
Not really. load and ajax is the same function in background, an ajax call. Currently you use it twice.
OK, forgot the previous code and link. I think you know how to put two div at the same position in the document.
The first one is visible, the second hidden. We load the content in the second div and once the content is fully loaded, we fadeOut/FadeIn

<div class="slide-container current">first one</div>
<div class="slide-container">second one</div>

Open in new window


$('#nav li a').click(function(e){
        e.preventDefault(); 
        var toLoad = $(this).attr('href')+' #slide-container';
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        $(".slide-container:not(:visible)").load(toLoad, function() {
             $(".slide-container.current").fadeOut("slow", function() { $(this).removeClass("current"); });
             $(".slide-container").fadeIn("slow", function() { $(this).addClass("current"); });
        });
    });

Open in new window

0
 
LZ1Author Commented:
And that replaces the top of my current jquery code?  I'm sorry for the ignorance...I'm still trying to learn Jquery..
0
 
leakim971PluritechnicianCommented:
Yes and remove the previous one, the csspreloader code too
Don't forget to add a new div with the same class
Change the class name of the parent div
0
 
leakim971PluritechnicianCommented:
Check this :


LZ1.zip
0
 
leakim971PluritechnicianCommented:
I removed the initial/default content to let you see clearly the two divs with the class slide-container
The second one is hidden, we load the content inside it and when the content (the page) is fully loaded, we fadeOut the "current" div and fadeIn the "hidden" one.
leakim971-436905.flv
0
 
LZ1Author Commented:
Very slick.  I like it alot leakim.  However, I do need that initial content on the page.  How can I get it back there?
0
 
leakim971PluritechnicianCommented:
Update with its filename ?

$(".slide-container:first").load("filename.html #slide-container");
0
 
LZ1Author Commented:
hhhhhhmmmmm.......doesn't seem to be working right.  If I click on "Financial Services" it's showing the home.html page.
0
 
leakim971PluritechnicianCommented:
>If I click on "Financial Services" it's showing the home.html page.

remove the useless old code and css, check my page in the archive
0
 
LZ1Author Commented:
I've now lost the highlighting of the menu above as well.
0
 
leakim971PluritechnicianCommented:
I have it on my side
0
 
LZ1Author Commented:
I unzipped your files and uploaded them here.  I've lost the highlighting of the current page on the menu

http://rdsrc.us/7Ev44e
0
 
leakim971PluritechnicianCommented:
You don't have it like this (the video below) ?
Or I did not understood something ?
leakim971-437046.flv
0
 
LZ1Author Commented:
The hover works fine.  But when the user clicks, the menu li and a tags need to have the class "current" applied.  
0
 
leakim971PluritechnicianCommented:
OK, check this :
LZ1v2.zip
0
 
LZ1Author Commented:
Close........I still need to have the <a> tag classed to current
0
 
leakim971PluritechnicianCommented:
add this :
			$("a.current").removeClass("current");
			$(this).addClass("current");

Open in new window

after :
			$("#nav ul li").removeClass("current");
			$(this).parent().addClass("current");

Open in new window

0
 
LZ1Author Commented:
Perfect.  However, the first home.html page still doesn't load.....
0
 
leakim971PluritechnicianCommented:
what is the filename of the page ?
0
 
LZ1Author Commented:
home.html
0
 
leakim971PluritechnicianCommented:
So put the following in $(document).ready(function() :

$(".slide-container:first").load("home.html #slide-container");

Open in new window

0
 
LZ1Author Commented:
Thanks so much for sticking with me leakim!  I've opened up another question regarding jquery validation if your so inclined.  :)

Thanks again!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 14
  • 12
Tackle projects and never again get stuck behind a technical roadblock.
Join Now