Why doesn't my div fade out

Question

I'm trying to use the Jquery.UI library, the issue is, the example given at jqueryui.com is when you pass the effect type, where I want to load a fade out

The JSFiddle is here

http://jsfiddle.net/L3pMG/2/

My code

<div id="effect">
    <h3>Hide</h3>
    <p>Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.</p>
</div>

<script>
  $( document ).ready(function() {
         $( "#effect" ).hide( "blind", 1000, callback );
  });
</script>

Because `callback` is not defined. That's why you get an error and the code can't be run. See the [edited jsFiddle](http://jsfiddle.net/L3pMG/3/). — Ionică Bizău, Mar 02 '14 at 19:17
@IonicăBizău please move to answer so I can mark it as such — MyDaftQuestions, Mar 02 '14 at 19:29
Posted. Next time see the browser errors before posting a question like this. :-) — Ionică Bizău, Mar 02 '14 at 19:38
... Because I was doing everything in fiddle, I didn't even consider opening up firebug... Ooops. — MyDaftQuestions, Mar 03 '14 at 09:29
You can check the errors opening the dev tools even your application is in the jsfiddle. Anyway, I was happy to help you. :-) — Ionică Bizău, Mar 03 '14 at 11:19

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

Because callback is not defined. That's why you get an error and the code can't be run.

You can simply remove it or define the callback function:

$( document ).ready(function() {
    $( "#effect" ).hide( "blind", 1000);
});

or

$( document ).ready(function() {
   var callback = function () { console.log("foo"); }
   $( "#effect" ).hide( "blind", 1000, callback);
});

JSFIDDLE

To learn what the callbacks are, read more here.

Using hide() jQuery method you can pass a function as last parameter. See the documentation.

complete

Type: Function()

A function to call once the animation is complete.

score 4 · Answer 2 · answered Mar 02 '14 at 19:19

4

Your only problem is that callback is not defined, take away that and it works fine.

answered Mar 02 '14 at 19:19

PixelAcorn

494
7
26

this is +1 but, the comment answered first although you are right. – MyDaftQuestions Mar 02 '14 at 19:35
I know, that's why I upped the comment. – PixelAcorn Mar 02 '14 at 22:19

score 0 · Answer 3 · answered Mar 02 '14 at 19:18

If this is truly the entirety of your code, you have to wrap the script in <script> tags before it will do anything.

It also seems to be breaking on "callback" so try removing that argument.

<div id="effect">
    <h3>Hide</h3>
    <p>Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.</p>
</div>

<script>
$( document ).ready(function() {
    $( "#effect" ).hide( "blind", 1000 );
});
</script>

See: http://jsfiddle.net/L3pMG/5/

Why doesn't my div fade out

3 Answers3