CODEWITHSUNDEEP
jqueryhtml
user3464627
user3464627

Reputation: 55

Smooth jquery transitions

I have this javascript which brings in new content and replaces the old but the transition in which it does this is ugly, it feels just like a regular link.

$(document).ready(function() {
// initial
$('#content').load('content/index.html');

// handle menu clicks
$('div#nav ul li a').click(function() {
var page = $(this).attr('href');
$('#content').load('content/' + page + '.html');

return false;
});
});

How can I add in a transition to make navigation my site more fluid?

I've tried .fadeIn but that doesn't seem to work

Upvotes: 0

Views: 80

Answers (2)

John Hartsock
John Hartsock

Reputation: 86862

I would use the complete callbacks on the .fadeOut() and the .load() methods to accomplish this.

Note: Utilizing the complete function on the .fadeOut() is not necessary but it ensures that you do not start loading content until the element is completely out of site. This will keep from strange flickering when the AJAX call returns really fast

var $content; 
$(document).ready(function() {
  $content = $('#content');
  // initial
  $content.fadeOut("slow", function() {
    $content.load('content/index.html', function() {
      $content.fadeIn("slow");
    });
  })


  // handle menu clicks
  $('div#nav ul li a').click(function() {
    var page = $(this).attr('href');
    $content.fadeOut("slow", function() {
      $content.load('content/' + page + '.html', function() {
        $content.fadeIn("slow");
      });
    })

    return false;
  });
});

Now here is a bit more to make your code easier to maintain

var changeContent = function(page) {
  var $content = $(content);
  $content.fadeOut("slow", function() {
    $content.load('content/' + page + '.html', function() {
      $content.fadeIn("slow");
    });
};

$(document).ready(function() {
  changeContent("index");

  // handle menu clicks
  $('div#nav ul li a').click(function() {
    changeContent($(this).attr('href'));        
    return false;
  });
});

Upvotes: 1

Amit Soni
Amit Soni

Reputation: 1427

try this

$('#content').fadeOut('fast',function(){
        var $this = $(this);
        $this.load('content/' + page + '.html',function(){
             $this.fadeIn('fast');
        });
});

Upvotes: 2

Related Questions