使用jQuery淡化AJAX

时间:2012-03-04 17:43:06

标签: jquery ajax

好的,我有一个ajax脚本。 它与jQuery 1.4.4和jQuery地址1.3.2结合在一起。 基本上,我希望它可以淡入淡出div而不是像现在这样改变它。我希望它看起来更流畅。

这是AJAX:

jQuery.noConflict()

if( window.location.hash == "" ) {
    window.location.href = "#home";
}

jQuery(document).ready(function(event) {

  jQuery.address.change(onAddressChange);   

  jQuery('a[href=' + window.location.hash + ']').addClass('selected');

  jQuery('a[rel=ajax]').click(function (evt) {
    evt.preventDefault();

    var hash = evt.target.href;
    hash = hash.replace(/^.*#\//, '');
    jQuery.address.value(hash);

    jQuery('#content').hide();
    jQuery('.loading').show();
  });
});

// Handles forms

$( 'form' ).live( 'submit', function() {

        var hash = window.location.hash.replace( '#', '' );
            hash = $.browser.mozilla ? hash : decodeURIComponent( hash );

        if( $( this ).attr( 'action' ) == '' ) $( this ).attr( 'action', hash );

        $( this ).append( '<input type="hidden" name="submit" value="submit" />' );

        var data = $( this ).serialize();

        $.post( 'loader.php?page=' + $( this ).attr( 'action' ), data, function( response, status ) {

            if( status == 'error' ) return false;

            $( '#content' ).html( response );

        } );

        return false;

    } );

// End forms

function onAddressChange(evt) {
  var page = evt.value.replace(/[#!\/]/, '');

  jQuery('a[rel=ajax]').removeClass('selected');
  jQuery('#'+page).addClass('selected');

  var data = 'page=' + encodeURIComponent(page);
  jQuery.ajax({
    url: "loader.php",
    type: "GET",
    data: data,
    cache: false,
    success: function (html) {
      jQuery('.loading').hide();
      jQuery('#content').html(html);
      jQuery('#content').fadeIn('slow');
    }   
  });
}

我不编码JS。这是由朋友提供给我的。 因此,如果有人可以让我淡入淡出,我会非常感激。

如果您需要:www.julake.co.uk/staff/media_123

这是一个有效的例子:www.44lizards.com/ajaxcodedrop

1 个答案:

答案 0 :(得分:0)

CBA要查看那个可怕的书面代码,但我猜你可以用.fadeIn(300)和.fadeOut(300)替换“.show()”和“.hide()”,这将会褪色在0.3秒的时间内进/出。

所以.fadeIn用于显示,而.fadeOut用于隐藏。