Databases
StackOverflow2013
Postsdbo
POjQuery beginner question regarding slide up/down effect
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery beginner question regarding slide up/down effect
    text
    copied!<p>So I tried creating the slide up down effect like in this example,</p> <p><a href="http://paulsturgess.co.uk/articles/show/83-jquery-text-slide-up-slide-down-effect" rel="nofollow noreferrer">http://paulsturgess.co.uk/articles/show/83-jquery-text-slide-up-slide-down-effect</a></p> <p>The problem is, it's showing the text when the web page opens.</p> <p>I want the "Paragraph" to be displayed ONLY when mouse is over it and NOT when the page first loads.</p> <p>I am a completely new to jQuery, but I want to make it work.</p> <p>Help?</p> <p>My script</p> <pre><code>&lt;script type="text/javascript"&gt; $(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"); }); }); } </code></pre> <p></p> <p>HTML content</p> <pre><code>&lt;div&gt; &lt;div class="feature_box" align="right"&gt; &lt;h2&gt;&lt;a href="#"&gt;Cart Details&lt;/a&gt;&lt;/h2&gt; &lt;p&gt; &lt;a href="#"&gt;Excepteur sint occaecat cupidatat non proident. &lt;BR /&gt; Qui officia deserunt mollit anim id est laborum&lt;br /&gt; Excepteur sint occaecat cupidatat non proident. &lt;BR /&gt; Qui officia deserunt mollit anim id est laborum&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>What changes do I make so that the paragraph doesn't appear by default when the page first loads?</p> <p>Also, is the mouse-over effect on the <code>div</code> tag or the <code>p</code> tag? I am a bit confused. Sorry, I am really new to all this.</p> <p>[EDIT]</p> <p>I just made some changes, and it didn't display the paragraph when the page first loaded.</p> <p>The following line was commented out.</p> <p>// text.css({ position: 'absolute', top: '57px' }).hide();</p> <p>Again is the mouse-over effect on <code>DIV</code> tag or <code>P</code> tag?</p> <p>[EDIT 2]</p> <p>Is the following line of code containing some function of jQuery or what?</p> <pre><code>text.css({ position: 'absolute', top: '57px' }).hide(); </code></pre> <p>What is the "text.css"?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload