Question

Hey guys, attached below is my code, and then my CSS. They item fades in correctly, but wont seem to fade out.

<div id="click-22" class="defer-icon">
<script>


      $("#click-22").click(function () {
        $("#22").fadeIn("slow");
      });
      $("#set-22").click(function () {
        $("#22").fadeOut("slow");
      });


</script>

    <div id="22" class="defer-pop">

        <div id="set-22" style="background-color:red">Set</div>
        <div id="cancel-22">Cancel</div>


    </div>

</div>

Class for defer-pop:

.defer-pop{
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    border:1px solid #CCC;
    position:relative;
    top:-80px;
    left:-90px;
    background-color:#fff;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(212,212,212)),
        color-stop(0.62, rgb(245,245,245))
    );
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(212,212,212) 0%,
        rgb(245,245,245) 62%
    );
    display:none;
    width:200px;
    height:80px;
    font-size:10px;
     box-shadow:0px 1px 0px #ababab;
    -webkit-box-shadow:0px 0px 10px #ababab;
    -moz-box-shadow:0 1px 0px #ababab;
}

Any help would be great!

Thanks

Answer 1

HTML

<div id="click-22" class="defer-icon" style="background-color:#000">

    <div id="22" class="defer-pop">

        <div id="set-22" style="background-color:red">Set</div>
        <div id="cancel-22">Cancel</div>


    </div>

</div>

Javascript

<script type="text/javascript">
$(document).ready(function(){
  $("#click-22").click(function () {
    $("#22").fadeIn("slow");
  });
  $("#set-22").click(function () {
    $("#22").fadeOut("slow");
  });
})
</script>

Css for my help

.defer-pop{
    width:200px;
    height:200px
}

Remember include jquery.js above tag

and tip-

you should be writing your code in

$(document).ready(function(){
    //your logic here
});