Javascript 具有可变高度和Ajax内容的jQuery动画滑块

我在浮动div上有一系列链接，所以它们总是可见的。当用户单击其中一个时，我希望按顺序执行以下操作：

页面向上滚动到ajax容器所在的顶部 当前内容将滑出 新内容加载ajax 新内容滑入 注意：由于每个ajax文件中的内容不同，ajax容器将需要扩展/收缩以适应

我希望在没有jQueryUI的情况下实现这一点，并尽可能保持代码的精简

我整天都在谷歌上搜索，试图用回调和队列函数来实现这一点，但很难让它按预期工作。如果有人能帮助我理解如何构造这些函数以使其工作，我将不胜感激

我对代码进行了抽象，以向您展示我的位置：

它当前在页面顶部滑动，并加载内容。但我还没有让过渡顺利有序地进行

非常感谢

这个页面符合我想你的要求，我没有做任何造型；那就交给你了

我想你已经很接近了，你只需要稍微改变一下元素的排队方式。在某些地方，您所做的也比我认为的要多一些。例如empty.append vs.html

让我知道我是否偏离了目标

这个页面符合我想你的要求，我没有做任何造型；那就交给你了

我想你已经很接近了，你只需要稍微改变一下元素的排队方式。在某些地方，您所做的也比我认为的要多一些。例如empty.append vs.html

---

如果我没有理解错，请告诉我。

如果我理解正确，您已经整理好了所有内容，除了转换本身

这是我的原型，可以满足您的需要：

使旧内容滑出 使新内容滑入 调整动态内容容器的大小以适应新内容 工作区：

代码相当粗糙，但提供了建议方法的主要思想。我使用links的rel属性来引用静态模拟内容。在现实生活中，您会发出ajax请求，获取数据，然后启动转换

示例html：

<div id="primarynav">
              <ul id="navigation">
                  <li><a href="page1.html" class="selected" rel="content1">Page 1</a></li>
                  <li><a href="page2.html" rel="content2">Page 2</a></li>
                  <li><a href="page3.html" rel="content3">Page 3</a></li>
              </ul>
          </div>

<div id="ajax-content"></div>

<div class="preload">
    <div id="content1">I have a series of links on a floating div (so they're always visible). When a user clicks one, I would like the following to happen in sequence:

The page scrolls up to the top (where the ajax container is located)
The current content slides out
The new content loads (ajax)
The new content slides in
NB: As the content in each ajax file is different, the ajax container will need to expand/contract to fit.

I would like to do this without jQuery UI, and keep the code as lite as possible.

I've been googling and attempting to do this with callbacks and queue functions all day, but struggle to get it working as intended. If anyone can please help me understand how to structure these functions to get it working I'd be incredibly grateful.

I've abstracted my code to show you where I'm at: http://jsfiddle.net/Cz5kg/1/

It currently slides the top of the page, and loads the content. But i'm yet to get the transitions working smoothly and in sequence.

Many thanks in advance.</div>

    <div id="content2">I'm writing a simple javascript to calculate the time difference between server and user time. But something is going wrong.

If I catch the javascript and php date i have:

date("M d Y h:i:s A")
php date : Wed Jun 27 2012 04:10:41 AM  

new Date()
J S date : Wed Jun 27 2012 10:10:40 GMT+0200 (CEST)   
This is correct! I have two different time for local and server time.

Now if I take the seconds time... something goes wrong:

(php: date("U"))
sec PHP: 1340784640    

(js new Date().getTime()/1000 )
sec J S: 1340784640
I got the same time!

Can you help me to fix it ?

Thanks!
    </div>

    <div id="content3">I've been given a big project by a big client and I've been working on it for 2 months now. I'm getting closer and closer to a solution but it's just so insanely complex that I can't quite get there, and so I need ideas.

The project is quite simple: There is a 1mil+ database of lat/lng coordinates with lots of additional data for each record. A user will visit a page and enter some search terms which will filter out quite a lot of the records. All of the records that match the filter are displayed (often clustered) on a Google Maps.

The problem with this is that the client demands it's fast, lean, and low-bandwidth. Hence, I'm stuck. What I'm currently doing is: Present the first clusters, and when they hover over a cluster, begin loading in the data for that clusters children.

However, I've upped it to 30,000 of the millions of listings and it's starting to drag a little. I've made as many optimizations that I possibly can. When the filter is changed, I AJAX a query to the DB and return all the ID's of the matches, then update the map to reflect this.

So, optimization is not an option. I need an entirely new conceptual model for this. Any input at all would be highly appreciated, as this is an incredibly complex project of which I can't find anything in history even remotely close to it- I even looked at MMORPG's which have a lot of similar problems, and I have made a few, but the concept of having a million players in one room is still something MMORPG makers cringe at.

I'll be awarding 500 rep as soon as it becomes available for anything that solves this.

Thanks- Daniel.        
    </div>
</div>

最后是修改后的JavaScript，带有大量注释：

$(document).ready(function() {

    var $navlinks = $('#navigation li a'),
        $ajaxcontent = $('#ajax-content'),
        animDur = 5000, // animation duration
        isTransitionRunning = false;

    $navlinks.click(function(e) {        
        e.preventDefault(); // prevent default action
        // block actions until current transition finishes
        if(isTransitionRunning) {
            return false;
        }                
        var contentWidth = $ajaxcontent.width(),
            newContent = $('#' + $(this).attr('rel')).html(), // mock content                
            $newItem = $(document.createElement('div')), // nested container for new content
            newItemHeight,
            newContentHeight,
            $oldItem = $ajaxcontent.children('.item-container');

        // set the flag indicating that the transition is running
        isTransitionRunning = true;

        $newItem.addClass('item-container');

        $('html, body').animate({scrollTop:0}, 'slow');              

        //$ajaxcontent.empty().append("<div id='loading'><img src='http://expression.ws/stackoverflow/load.gif' alt='Loading Content' /></div>");
        $navlinks.removeClass('selected');
        $(this).addClass('selected');

        /*$.ajax({ url: this.href, success: function(html) {
            $ajaxcontent.empty().append(html);
            }
        });*/

        // freeze current ajax container height
        $ajaxcontent.height($ajaxcontent.height());
        $ajaxcontent.css('overflow', 'hidden');

        // slide away old item (if any)
        if($oldItem.length) {
            $oldItem
                 // fix width so no wrapping occurs during transision
                .width(contentWidth) 
                // position absolutely
                .css('position', 'absolute')
                .animate({
                    left: -contentWidth // move new content at the right edge of container
                },
                animDur,
                function() {
                    // remove old content at the end
                    // you may want to cache it instead
                     $oldItem.remove();
                });
        }

        // append new content to container
        $newItem.html(newContent);
        $ajaxcontent.append($newItem);
        // fix new content width
        $newItem.width(contentWidth);
        // determine height of new content when it's appended to DOM
        newItemHeight = $newItem.height();

        // set up new content
        $newItem
            // move it to the right
            .css('position', 'absolute')
            .css('left', $ajaxcontent.width() + 'px')
            // sliding animation
            .animate({
                left: 0
            }, 
            animDur,
            function() {
                // restore css
                $newItem.css('position', 'static');
                $newItem.css('width', 'auto');
            });

        // change ajax container height
        $ajaxcontent.animate({
            height: newItemHeight
        },
        animDur,
        function() {
            // now let ajax container naturally wrap around its content
            $ajaxcontent.css('height', 'auto');
            $ajaxcontent.css('overflow', 'auto');

            // unset the transition running flag
            isTransitionRunning = false;
        });

        return false;
    });

    //$ajaxcontent.empty().append("<div id='loading'><img src='http://expression.ws/stackoverflow/load.gif' alt='Loading Content' /></div>");
    $.ajax({ url: 'page1.html', success: function(html) {
            $ajaxcontent.empty().append(html);
    }
    });
});

---

如果我理解正确的话，除了转换本身，您已经对所有内容进行了分类

这是我的原型，可以满足您的需要：

使旧内容滑出 使新内容滑入 调整动态内容容器的大小以适应新内容 工作区：

代码相当粗糙，但提供了建议方法的主要思想。我使用links的rel属性来引用静态模拟内容。在现实生活中，您会发出ajax请求，获取数据，然后启动转换

示例html：

<div id="primarynav">
              <ul id="navigation">
                  <li><a href="page1.html" class="selected" rel="content1">Page 1</a></li>
                  <li><a href="page2.html" rel="content2">Page 2</a></li>
                  <li><a href="page3.html" rel="content3">Page 3</a></li>
              </ul>
          </div>

<div id="ajax-content"></div>

<div class="preload">
    <div id="content1">I have a series of links on a floating div (so they're always visible). When a user clicks one, I would like the following to happen in sequence:

The page scrolls up to the top (where the ajax container is located)
The current content slides out
The new content loads (ajax)
The new content slides in
NB: As the content in each ajax file is different, the ajax container will need to expand/contract to fit.

I would like to do this without jQuery UI, and keep the code as lite as possible.

I've been googling and attempting to do this with callbacks and queue functions all day, but struggle to get it working as intended. If anyone can please help me understand how to structure these functions to get it working I'd be incredibly grateful.

I've abstracted my code to show you where I'm at: http://jsfiddle.net/Cz5kg/1/

It currently slides the top of the page, and loads the content. But i'm yet to get the transitions working smoothly and in sequence.

Many thanks in advance.</div>

    <div id="content2">I'm writing a simple javascript to calculate the time difference between server and user time. But something is going wrong.

If I catch the javascript and php date i have:

date("M d Y h:i:s A")
php date : Wed Jun 27 2012 04:10:41 AM  

new Date()
J S date : Wed Jun 27 2012 10:10:40 GMT+0200 (CEST)   
This is correct! I have two different time for local and server time.

Now if I take the seconds time... something goes wrong:

(php: date("U"))
sec PHP: 1340784640    

(js new Date().getTime()/1000 )
sec J S: 1340784640
I got the same time!

Can you help me to fix it ?

Thanks!
    </div>

    <div id="content3">I've been given a big project by a big client and I've been working on it for 2 months now. I'm getting closer and closer to a solution but it's just so insanely complex that I can't quite get there, and so I need ideas.

The project is quite simple: There is a 1mil+ database of lat/lng coordinates with lots of additional data for each record. A user will visit a page and enter some search terms which will filter out quite a lot of the records. All of the records that match the filter are displayed (often clustered) on a Google Maps.

The problem with this is that the client demands it's fast, lean, and low-bandwidth. Hence, I'm stuck. What I'm currently doing is: Present the first clusters, and when they hover over a cluster, begin loading in the data for that clusters children.

However, I've upped it to 30,000 of the millions of listings and it's starting to drag a little. I've made as many optimizations that I possibly can. When the filter is changed, I AJAX a query to the DB and return all the ID's of the matches, then update the map to reflect this.

So, optimization is not an option. I need an entirely new conceptual model for this. Any input at all would be highly appreciated, as this is an incredibly complex project of which I can't find anything in history even remotely close to it- I even looked at MMORPG's which have a lot of similar problems, and I have made a few, but the concept of having a million players in one room is still something MMORPG makers cringe at.

I'll be awarding 500 rep as soon as it becomes available for anything that solves this.

Thanks- Daniel.        
    </div>
</div>

最后是修改后的JavaScript，带有大量注释：

$(document).ready(function() {

    var $navlinks = $('#navigation li a'),
        $ajaxcontent = $('#ajax-content'),
        animDur = 5000, // animation duration
        isTransitionRunning = false;

    $navlinks.click(function(e) {        
        e.preventDefault(); // prevent default action
        // block actions until current transition finishes
        if(isTransitionRunning) {
            return false;
        }                
        var contentWidth = $ajaxcontent.width(),
            newContent = $('#' + $(this).attr('rel')).html(), // mock content                
            $newItem = $(document.createElement('div')), // nested container for new content
            newItemHeight,
            newContentHeight,
            $oldItem = $ajaxcontent.children('.item-container');

        // set the flag indicating that the transition is running
        isTransitionRunning = true;

        $newItem.addClass('item-container');

        $('html, body').animate({scrollTop:0}, 'slow');              

        //$ajaxcontent.empty().append("<div id='loading'><img src='http://expression.ws/stackoverflow/load.gif' alt='Loading Content' /></div>");
        $navlinks.removeClass('selected');
        $(this).addClass('selected');

        /*$.ajax({ url: this.href, success: function(html) {
            $ajaxcontent.empty().append(html);
            }
        });*/

        // freeze current ajax container height
        $ajaxcontent.height($ajaxcontent.height());
        $ajaxcontent.css('overflow', 'hidden');

        // slide away old item (if any)
        if($oldItem.length) {
            $oldItem
                 // fix width so no wrapping occurs during transision
                .width(contentWidth) 
                // position absolutely
                .css('position', 'absolute')
                .animate({
                    left: -contentWidth // move new content at the right edge of container
                },
                animDur,
                function() {
                    // remove old content at the end
                    // you may want to cache it instead
                     $oldItem.remove();
                });
        }

        // append new content to container
        $newItem.html(newContent);
        $ajaxcontent.append($newItem);
        // fix new content width
        $newItem.width(contentWidth);
        // determine height of new content when it's appended to DOM
        newItemHeight = $newItem.height();

        // set up new content
        $newItem
            // move it to the right
            .css('position', 'absolute')
            .css('left', $ajaxcontent.width() + 'px')
            // sliding animation
            .animate({
                left: 0
            }, 
            animDur,
            function() {
                // restore css
                $newItem.css('position', 'static');
                $newItem.css('width', 'auto');
            });

        // change ajax container height
        $ajaxcontent.animate({
            height: newItemHeight
        },
        animDur,
        function() {
            // now let ajax container naturally wrap around its content
            $ajaxcontent.css('height', 'auto');
            $ajaxcontent.css('overflow', 'auto');

            // unset the transition running flag
            isTransitionRunning = false;
        });

        return false;
    });

    //$ajaxcontent.empty().append("<div id='loading'><img src='http://expression.ws/stackoverflow/load.gif' alt='Loading Content' /></div>");
    $.ajax({ url: 'page1.html', success: function(html) {
            $ajaxcontent.empty().append(html);
    }
    });
});

---

很抱歉，它从来没有打算这么做，因为它引用的是当前本地而非活动的ajax文件。我在pastebin中用一些简单的代码替换了JSFIDLE链接，以减轻混淆。大家好，我基本上已经让每一个单独的函数都工作了——正如pastebin中引用的那样。我们只是在寻找一种方法，对每个功能/动画进行排序，以便它们连续发生。我正在努力保持代码精简，因为页面中已经有很多内容在进行ajax、jq同位素、jq验证和一堆响应性js。您是否设法解决了您的问题？谢谢。你的帮助是巨大的。我实际上能够让这两个响应都起作用。对不起，这并不是说它不能，因为它引用的是当前本地而非活动的ajax文件。我在pastebin中用一些简单的代码替换了JSFIDLE链接，以减轻混淆。大家好，我基本上已经让每一个单独的函数都工作了——正如pastebin中引用的那样。我们只是在寻找一种方法，对每个功能/动画进行排序，以便它们连续发生。我正在努力保持代码精简，因为页面中已经有很多内容在进行ajax、jq同位素、jq验证和一堆响应性js。您是否设法解决了您的问题？谢谢。你的帮助是巨大的。我实际上能够使这两种反应都起作用。+1用于手动编写动态滑块。在上一个动画未完成时单击链接时发生冒泡错误。我会考虑哪一个专业的动态滑块高度。非常感谢这个详细的解释和代码-你去超越。只有一两件事。。。当上一个动画仍在进行时，在之前按下另一个按钮时，过渡看起来确实重叠。有什么简单的方法可以解决这个问题吗？还有就是集成ajax有点困难。你介意再加一个快速的吗

---

解释所需的代码，以及如何使用它@arttronics-感谢您提供尴尬的showcase链接。看起来不错，但不幸的是，它似乎不适用于Ajax内容？@Nelga，这种重叠称为冒泡，这在jQuery中非常常见。除非处理过，否则请设置动画。如果我没记错的话，一个.stop就在.animate之前完成，以防止出现这种情况。至于笨拙的插件和AJAX，您可以配置AJAX来填充durk已经建立为内容幻灯片的Div的内容。然后可以使用笨拙的API前进到该幻灯片。如果Dmitry Pashkevich愿意的话，我会让他为尴尬做点什么，因为他比我更了解这个工作流程。@arttronics我看过这个尴尬的插件，看起来它不支持动态内容。该插件代码不公开任何外部函数，只需使用页面上已有的数据运行一次。@Nelga我将在代码中修复并发效果问题，并提供将其用于动态内容的指南，但它仍然只是说明该方法的快速演示。如果你需要一个高质量的实现，你可能会找到一个可以工作的jquery插件，但是你说你不想在你的页面上添加更多的外部库？+1手工编写一个动态滑块。在上一个动画未完成时单击链接时发生冒泡错误。我会考虑哪一个专业的动态滑块高度。非常感谢这个详细的解释和代码-你去超越。只有一两件事。。。当上一个动画仍在进行时，在之前按下另一个按钮时，过渡看起来确实重叠。有什么简单的方法可以解决这个问题吗？还有就是集成ajax有点困难。您是否介意添加一个所需代码的快速解释，以及如何使用它@arttronics-感谢您提供尴尬的showcase链接。看起来不错，但不幸的是，它似乎不适用于Ajax内容？@Nelga，这种重叠称为冒泡，这在jQuery中非常常见。除非处理过，否则请设置动画。如果我没记错的话，一个.stop就在.animate之前完成，以防止出现这种情况。至于笨拙的插件和AJAX，您可以配置AJAX来填充durk已经建立为内容幻灯片的Div的内容。然后可以使用笨拙的API前进到该幻灯片。如果Dmitry Pashkevich愿意的话，我会让他为尴尬做点什么，因为他比我更了解这个工作流程。@arttronics我看过这个尴尬的插件，看起来它不支持动态内容。该插件代码不公开任何外部函数，只需使用页面上已有的数据运行一次。@Nelga我将在代码中修复并发效果问题，并提供将其用于动态内容的指南，但它仍然只是说明该方法的快速演示。如果你需要一个高质量的实现，你可能会找到一个可以工作的jquery插件，但是你说你不想在你的页面上添加更多的外部库？这非常接近，但不幸的是，当应用到我的代码时，出现了与我最初遇到的问题相同的问题。在动画发生之前加载的内容。@Nelga将.load调用放在.slideUp事件的回调中，以便在该事件完成后启动。此代码与Dmitry的上述代码一样有效。我希望我能赏金两次。非常感谢您的帮助。这非常接近，但不幸的是，当应用到我的代码时，出现了与我最初遇到的问题相同的问题。在动画发生之前加载的内容。@Nelga将.load调用放在.slideUp事件的回调中，以便在该事件完成后启动。此代码与Dmitry的上述代码一样有效。我希望我能赏金两次。非常感谢你的帮助。