jquery，将当前项目移动到顶部

我遇到的问题是，如果第四个项目有一个很长的描述，它切断，因为它下面#features（由于我的设计与溢出严格高：隐藏jquery，将当前项目移动到顶部

我希望是有人会对如何使当前所选项目的建议，以移动到顶部

下面是一个例子网址：forums.wuggawoo.co.uk/example .php基本上它应该从项目1，项目2，项目3，项目4开始，项目1显示其描述.5秒钟后，订单应该是项目2，项目3，项目4，项目1，项目2将显示其描述。 5秒后，订单应为项目3，项目4，项目1，项目2与第3项显示其描述等等等等的代码，我刚刚更新我张贴的链接，还挺做，但由于某种原因，第一几圈

<!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.FeatureBar.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>

来源

2010-05-22 azz0r

为什么你使用jQuery？ – 2010-05-22 10:14:58

????为什么不？？？？ – azz0r 2010-05-22 11:24:01

因为它在这里没有做任何事情。如果我运行你的代码，我得到以下错误：'ReferenceError：找不到变量：Model'。所以这里缺少一些东西。如果我们无法重现您的问题，这将非常困难！而你的意思是“它切断，因为它低于#features” – jigfox 2010-05-22 11:32:24

我建议你这样做后得到升技消息：

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

这将把每个“功能描述”放在父母的开始/顶部“.feature” 在哪里把代码？那么它取决于你想要它改变地方。

如果你想在页面加载。然后把它放在你的初始化函数...

希望它有帮助

来源

2010-05-22 13:54:33 Val

你会把它放在哪里？基本上，例如：项目1在那里开始，5秒钟后，项目2向上滚动，然后项目3，然后是项目4.然而由于设计限制，框的高度切断了项目4s的描述。我想要的是当前正在循环显示并移动到顶部的项目。 – azz0r 2010-05-22 17:18:06

发布一个链接到页面...所以我可以看到它是如何工作的... – Val 2010-05-23 10:55:30

它可能更容易将代码粘贴到一个html文件中，并将jquery 1.4的副本放在 – azz0r 2010-05-23 11:07:12

jquery，将当前项目移动到顶部

回答

相关问题