jquery, moving the current item to the top_问答_开发者

The problem I'm having is that if the fourth item has a long description, it cuts off as it goes below #features (due to a strict high in my design with the overflow:hidden.

What I was hoping is someone would have a suggestion on how to make the current item selected to move to the top?

Here is an example url: forums.wuggawoo.co.uk/example.php Essentially It should start with item 1, item 2, item 3, item 4 with item 1 displaying its description. After 5 seconds the order should be item 2, item 3, item 4, item 1 with item 2 displaying its description. After 5 seconds the order should be item 3, item 4, item 1, item 2 with item 3 displaying its description etc etc The code I just updated on the link I posted, kinda does it but for some reason it gets abit message after the first few loops

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="/library/jquery/1.4.js"></script>
<script>

var Model = {}
 jQuery( function(){ Model.FeatureBar.init(jQuery('.features')) } );

Model.FeatureBar = {
        current:0,
        items:{},
        init: function init(options){

            var me = this;
            me.triggers = []
            me.slides = []
            this.container = jQuery('#features');

            jQuery('.feature').each(function(i){
                me.triggers[i] = {url: jQuery(this).children('.feature-title a').href, title: jQuery(this).children('.feature-title'),description:jQuery(this).children('.feature-description')}
                me.slides[i] = {image: jQuery(this).children('.feature-image')}
            });

            for(var i in this.slides){
                this.slides[i].image.hide();
                this.triggers[i].description.hide();
            }
            Model.Featu开发者_Go百科reBar.goToItem(0);
            setInterval(function(){Model.FeatureBar.next()},5000);
        },
        next: function next(){
            var i = (this.current+1 < this.triggers.length) ? this.current+1 : 0;
            this.goToItem(i);
        },
        previous: function previous(){
            var i = (this.current-1 > 1) ? this.current-1 : this.triggers.length;
            this.goToItem(i);
        },
        goToItem: function goToItem(i) {
            if (!this.slides[i]) {
                throw 'Slide out of range';
            }
            this.triggers[this.current].description.slideUp();
            this.triggers[i].description.slideDown();

            this.slides[this.current].image.hide();
            this.slides[i].image.show();

            this.current = i;
        },
}
</script>
</head>

<body>

<div id="features">
            <div class="feature current">
                        <div style="display: none;" class="feature-image">
                <a href="google.com"><img src="/design/images/miss.png"></a>
            </div>
            <h2 class="feature-title"><a href="google.com">Item 1</a></h2>
            <p style="display: none;" class="feature-description"><a href="google.com">Item 1 description</a></p>
        </div>

            <div class="feature">
                            <div class="movie-cover">
                    <a href="/movie/movie"><img src="/image2.png" alt="" title=""></a>
                </div>
                        <div style="display: block;" class="feature-image">
                <a href="/rude/movie"><img src="/images/Featured/rude.png"></a>
            </div>
            <h2 class="feature-title"><a href="/rude/movie">Item 2</a></h2>

            <p style="display: block;" class="feature-description"><a href="/rude/movie">Item 2 description</a></p>
        </div>
            <div class="feature">
                        <div style="display: none;" class="feature-image">
                <a href="/pis/movie"><img src="/image3.png"></a>
            </div>
            <h2 class="feature-title"><a href="/pis/movie">Item 3</a></h2>
            <p style="display: none;" class="feature-description"><a href="/pis/movie">Item 3 description</a></p>

        </div>
            <div class="feature">
                        <div style="display: none;" class="feature-image">
                <a href="what.com"><img src="/images/Featured/indie.png"></a>
            </div>
            <h2 class="feature-title"><a href="what.com">Item 4</a></h2>
            <p style="display: none;" class="feature-description"><a href="what.com">Item 4 description</a></p>

        </div>
    </div>


</body>
</html>

I suggest you do this:

$('.feature-description').each(function (i,n){
    var parent = $(n).closest('.feature');
    $(n).prependTo(parent);
});

This will take each "feature-description" put it to the begining/top of the parent ".feature" Where to put the code? Well it depends when you want it to change places.

if you want it on page load. then put it on yout init function...

Hope it helps