JQuery beginner slide up / down question

Question

So I tried to create a slide-down effect, as in this example,

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

The problem is that it shows text when opening a web page.

I want the “Paragraph” to be displayed ONLY when the mouse is over it, and NOT when the first page loads.

I am completely new to jQuery but want it to work.

reference

My script

<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 content

<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>

What changes do I make so that the paragraph does not appear by default the first time the page loads?

Also, the mouse effect on the tag divor tag p? I'm a little confused. Sorry, I'm really new to this.

[EDIT]

I just made some changes and it didn't display the paragraph when the first page was loaded.

.

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

, div p?

[ 2]

, jQuery ?

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

"text.css"?

Answer 1

(, CSS , ). , , HTML- .

---

, .

jsFiddle

...

, :

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

showFeatureText $('.feature_box'), , this insde showFeatureText, this 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 DIV feature_box, , , ​​ 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, this - feature_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 - . .css() CSS. . , hide() . CSS . .

, , , div. , , , this, $('.feature_box'), div .feature_box, . , :

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

, hover() 2 . - , , box. - , , . div, text . , .

. jQuery .

each jsFiddle. , .

:

jQuery
.hide()
.hover()
.slideDown()
.slideUp()
.each()
jQuery

Answer 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>