I want to know if this jQuery pseudo-code would fade out then hide the ID#Fabric ?

$("#fabric")function() {
.fadeOut("6000").hide("500")
}

Recommended Answers

All 15 Replies

You would write it this way so the second method executed after the fadeOut completed. However in this case the hide() is not necessary since the fadeOut() sets the element's display to none when the animation is complete.

 $( "#clickme" ).click(function() {
   $( "#fabric" ).fadeOut( "6000", function() {
     // Animation complete, do something else
   });
 });

If I don't want it to do something else, I assume the code should be written as this ?

  $( "#clickme" ).click(function() {
    $( "#fabric" ).fadeOut("6000"
    });

Yes, sorry without the quotes if you use a number representing milliseconds..

$( "#clickme" ).click(function() {
    $( "#fabric" ).fadeOut(6000);
});
$("#fabric").click (function() {
.fadeOut(6000).hide(500)
})

If I wanted to make the ID#Fabric clickable, the above Pseduo code would be correct ?

I dont understand why you are still trying to use the hide() function in this example. fadeOut() takes care of hiding the element at the end of the process.

Here is the updated code based on your sample.

<div id="fabric">Fabric Div</div>
<script>

$("#fabric").click (function() {
    $(this).fadeOut(6000);
})

</script>

When the div is clicked, it will take 6 seconds for the div to fade out.

I pasted the wrong code, my fault :)
Function is placed within the parameter of .click, could this be done another way ?

Yes of course. I was only using the click event as an example. What event do you want to trigger this fadeOut()?

Must you place the function within the parameter ?
Suppose I wanted to fadeOut the DIV and collapse it at the same time ?

Must you place the function within the parameter ?

I dont know what you mean.

Suppose I wanted to fadeOut the DIV and collapse it at the same time ?
You can chain the .slideUp() method so that when the div finishes the fadeOut(), the text under the div slides up.

<div id="fabric" style="width:250px;height:200px;border:1px solid black">Fabric Div</div>
<p>Some text</p>
<script>
$("#fabric").click (function() {
    $(this).fadeOut(6000).slideUp();
})
</script>

The function is the event when the ID is clicked, now I understand, for the time being :)

nope, the function is the action that must take place when the associated element is clicked.

Or the ID :)

the associated element of the event that must trigger the function, may or may not be the element with the id, ID.

Here is some working jQuery code;Click Here Could the code be written better, or it's alright ? I

'm testing, on my page I'll want an anchor to call an event that pops up a div that is hidden, then you can close the div with, none other then an X on the div/section.

Its not actually working as you are intending. Since you have the anchor link, if you click on it, a post back is occuring. Based on what I'm seeing in your code, you simply want to use the anchor element for triggering the div hiding effect, correct? So, then you dont want the normal behavior of you anchor element to occur. To prevent it you need to include the preventDefault() method.

http://jsfiddle.net/G8rYb/1/

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.