2010-08-17 18 views
3

所以,我想在這個例子中上下效果,如創建幻燈片,jQuery的初學者問題關於幻燈片向上/向下作用

http://paulsturgess.co.uk/articles/show/83-jquery-text-slide-up-slide-down-effect

的問題是,它顯示的網頁打開時的文本。

我希望僅在鼠標懸停時顯示「段落」,而不在頁面第一次加載時顯示。

我是一個全新的jQuery,但我想讓它工作。

幫助?

我的腳本

<script type="text/javascript"> 

    $(function(){ 
    $('.feature_box').showFeatureText(); 
}) 

$.fn.showFeatureText = function() { 
    return this.each(function(){ 
    var box = $(this); 
    var text = $('p',this); 

    // text.css({ position: 'absolute', top: '57px' }).hide(); 

    box.hover(function(){ 
     text.slideDown("slow"); 
    },function(){ 
     text.slideUp("fast"); 
    }); 

    }); 
} 

HTML內容

<div> 
    <div class="feature_box" align="right"> 
     <h2><a href="#">Cart Details</a></h2> 
     <p> 
     <a href="#">Excepteur sint occaecat cupidatat non proident. <BR /> 
     Qui officia deserunt mollit anim id est laborum<br /> 
     Excepteur sint occaecat cupidatat non proident. <BR /> 
     Qui officia deserunt mollit anim id est laborum</a></p> 
    </div> 
</div> 

什麼樣的變化讓我的這樣,該段不默認,當第一次加載頁面出現?

此外,div標記或p標記上的鼠標懸停效果是什麼?我有點困惑。對不起,我對這一切都很陌生。

[編輯]

我只是做了一些改變,並且第一次加載頁面時,它沒有顯示的段落。

以下行被註釋掉了。

// text.css({position:'absolute',top:'57px'})。hide();

再一次是對DIV標記或P標記的鼠標懸停效果?

[EDIT 2]

是含有jQuery的或什麼的某種函數以下代碼行?

text.css({ position: 'absolute', top: '57px' }).hide(); 

什麼是「text.css」?

+0

我已經更新了我的答案。 – Strelok 2010-08-17 06:23:27

+1

@happysoul是的。 'text.css({position:'absolute',top:'57px'})。hide()'既定位和隱藏段落。它相當於'$('p',this).css({position:'absolute',top:'57px'})。hide()'。這很重要。看看我的答案中的代碼示例。 – 2010-08-17 07:23:02

回答

2

Here is the working code for the shopping cart確保您編輯CSS你怎麼想的那樣)。這是相同的代碼在example page,從你的問題在複製粘貼的HTML。


好了,現在讓我們通過代碼。

下面是從示例頁面在
jsFiddle example

逐步執行代碼的原代碼...

首先,我們使用調用該方法從一個匿名函數內部:

$('.feature_box').showFeatureText(); 

因爲,showFeatureText$('.feature_box')的一種方法我們知道每次使用this時都使用insde showFeatureTextthis指的是feature_box類的所有元素。這是你的情況中的一個DIV。文本框。

現在讓我們進入`showFeatureText。它被用作一個簡短的jQuery插件。它是jQuery的的方法:

$.fn.showFeatureText = function() { 
    return this.each(function(){  
     var box = $(this); 
     var text = $('p',this); 

     text.css({ position: 'absolute', top: '57px' }).hide(); 

     box.hover(function(){ 
      text.slideDown("fast"); 
     },function(){ 
      text.slideUp("fast"); 
     }); 
    }); 
} 

確定,return this.each(function(){...})必須被包括在內,以便該函數與jQuery的選擇很好地發揮。在這種情況下,我們的jQuery選擇是類feature_box的一個DIV,但請注意,即使將該函數作爲方法添加到選擇了許多元素的jQuery選擇中,該函數也可以工作,因爲它使用return this.each()。無論如何,只要知道必須包含這一點就足夠了,並且允許您將.showFeatureText鏈接到$('.feature_box')。好的,繼續前進。

 var box = $(this); 
     var text = $('p',this); 

這兩行爲我們的方便定義了兩個局部變量。 box$(this),在這種情況下是<div class="feature_box">。所以稱它爲box是有道理的。

文本是div內的段落。這是因爲('p', this)選擇this內的所有段落,並且thisfeature_box div。這是jQuery的基本語法。要在該用途中選擇所有這些:$(this, that)。這有點令人困惑,因爲選擇ID a和ID b你會使用$("#a, #b")這是完全不同的。請注意引號。

所以現在box是我們的大div .feature_box的代名詞,而text就是裏面的文字的同義詞。

讓我們繼續前進:

text.css({ position: 'absolute', top: '57px' }).hide(); 

我們只是做在feature_box DIV無形的所有段落。 text是paragaphs。 .css()爲它們分配CSS樣式。它定位它們。最後hide()使它們不可見。 CSS定位在頁面的整個生命週期中基本保持有效。沒有它,段落將在照片下方。

好的,現在文本全部隱藏了,我們將添加一些事件處理程序到我們的div。換句話說,我們想讓它如此,如果我們將鼠標懸停在this$('.feature_box').feature_box div上,那麼文本就會出現。我們還希望在我們沒有懸停時隱藏所有內容:

box.hover(function(){ 
     text.slideDown("fast"); 
    },function(){ 
     text.slideUp("fast"); 
    }); 

請注意hover()中有兩個函數。第一個是當我們將鼠標移到box上時發生的情況。第二個是我們退出時發生的事情。當我們將鼠標懸停在div上時,text滑落。當我們停止徘徊時,它會滑回去。

就是這樣。一個用於滑動內容的jQuery插件。

您可以在this jsFiddle example上看到each。請注意,所有三張圖片都有自己的滑動文字。

參考文獻:

jQuery selectors
.hide()
.hover()
.slideDown()
.slideUp()
.each()
authoring jQuery plugins

+0

太棒了。謝謝 ! :d – Serenity 2010-08-17 08:33:21

2

對於初學者來說,你應該先隱藏<p><p style="display:none;">...</p>

這裏是你的代碼應該是什麼樣子:

<script type="text/javascript"> 
    $.fn.showFeatureText = function() { 
     return this.each(function(){  
      var box = $(this); 
      var text = $('p',this);  
      box.hover(function(){ 
       text.slideDown("slow"); 
      },function(){ 
       text.slideUp("fast"); 
      });   
      }); 
    } 

    $(document).ready(function() { 
     $('.feature_box').showFeatureText();  
    }); 
</script> 

<div> 
    <div class="feature_box" align="right"> 
     <h2><a href="#">Cart Details</a></h2> 
     <p style="display:none;"> 
     <a href="#">Excepteur sint occaecat cupidatat non proident. <BR /> 
     Qui officia deserunt mollit anim id est laborum<br /> 
     Excepteur sint occaecat cupidatat non proident. <BR /> 
     Qui officia deserunt mollit anim id est laborum</a></p>  
    </div> 
</div> 
+0

看起來不像你最初拉起div。 – 2010-08-17 06:37:30

+1

@Peter。段落是隱藏的,而不是div。他需要標題保持可見。 – Strelok 2010-08-17 06:46:08

+0

great..thnx :)它的工作正常..但現在這個其他問題..我希望只有當鼠標懸停在鏈接「購物車詳細信息」上時纔會出現段落,但是當我將鼠標移動到整個DIV標籤的區域..我想要的段落ONLy當鼠標在這兩個單詞「購物車詳細信息」 不知道如何解釋...我如何實現這一目標?我試圖設置div標籤的寬度,但它不工作..它使para以及鏈接「購物車詳細信息」出現在左側..這很奇怪。任何建議? – Serenity 2010-08-17 06:47:36