简体   繁体   English

jQuery BBQ:添加诸如衰落,幻灯片等过渡效果

[英]jQuery BBQ: Adding transitions like fading, slide, etc

First time asking a question on here, but I use stackoverflow avidly. 第一次在这里问一个问题,但是我狂热地使用stackoverflow。

I've created a site using jQuery BBQ to load pages in an AJAX fashion, and still be able to track the history with back button, etc... 我创建了一个使用jQuery BBQ来以AJAX方式加载页面的网站,但仍然能够使用“后退”按钮等来跟踪历史记录...

Out of the box BBQ just uses the .hide() and .show() functions to load in the content. 开箱即用BBQ的只是使用.hide().show()函数中要加载的内容。 I'm wondering about the best way to modify this for seamless transitions like fading, for example. 我想知道修改此属性以实现无缝过渡(例如衰落)的最佳方法。

Here is the code: 这是代码:

$(function(){

  // Keep a mapping of url-to-container for caching purposes.
  var cache = {
    // If url is '' (no fragment), display this div's content.
    '': $('#home')
  };

  // Bind an event to window.onhashchange that, when the history state changes,
  // gets the url from the hash and displays either our cached content or fetches
  // new content to be displayed.
  $(window).bind( 'hashchange', function(e) {

    // Get the hash (fragment) as a string, with any leading # removed. Note that
    // in jQuery 1.4, you should use e.fragment instead of $.param.fragment().
    var url = $.param.fragment();

    // Remove .current class from any previously "current" link(s).
    $( 'a.current' ).removeClass( 'current' );

    // Hide any visible ajax content.
    $( '#main' ).children( ':visible' ).hide(1000);


    // Add .current class to "current" nav link(s), only if url isn't empty.
    url && $( 'a[href="#' + url + '"]' ).addClass( 'current' );

    if ( cache[ url ] ) {
      // Since the element is already in the cache, it doesn't need to be
      // created, so instead of creating it again, let's just show it!
      cache[ url ].show(1000);

    } else {
      // Show "loading" content while AJAX content loads.
      $( '.bbq-loading' ).show();

      // Create container for this url's content and store a reference to it in
      // the cache.
     //$('.page:visible').fadeout(1000);
       url  = $( '<div class="page"/>' )

        // Append the content container to the parent container.
        .appendTo( '#main' )

        // Load external content via AJAX. Note that in order to keep this
        // example streamlined, only the content in .infobox is shown. You'll
        // want to change this based on your needs.
        .load( url, function(){
          // Content loaded, hide "loading" content.
          $( '.bbq-loading' ).hide();

        });
    }
  })

  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).trigger( 'hashchange' );

});

As you can see I have a .hide(1000) and .show(1000) , but it seems to flash all the content on the page, even elements that are not within the <div id="main"> ... 如您所见,我有一个.show(1000) .hide(1000).show(1000) ,但是它似乎会刷新页面上的所有内容,即使不是<div id="main">内的元素也是如此。

Any help would be much appreciated. 任何帮助将非常感激。 I apologize I can't include the example as it is confidential between myself and the client. 抱歉,由于我和客户之间是机密信息,因此无法包含该示例。

You should go for a combo jquery addClass +css but you can also do it in pure jQuery through fade or animate, like this : 您应该使用组合jquery addClass + css,但您也可以通过淡入淡出或设置动画来在纯jQuery中执行此操作,如下所示:

//fadeOut the element
.fadeOut(1000);
.animate({opacity: 0}, 1000);

//fadeIn the element
.fadeIn(1000);
.animate({opacity: 1}, 1000);

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM