CODEWITHSUNDEEP
jquery
Dmitry Makovetskiyd
Dmitry Makovetskiyd

Reputation: 7053

jquery fadein , fadeout isnt working

             <div id="ranking">
                                    <div id="ranking_wrapper">
                                        <h5>Select site ranking</h5>
                                        <img src="images/star.png" width="23" height="23" alt="" border="0">
                                        <input type="hidden" name="sitename" value="webcamking">
                                        <input type="radio" name="rank" value="1">1
                                        <input type="radio" name="rank" value="2">2
                                        <input type="radio" name="rank" value="3" checked="checked">3
                                        <input type="radio" name="rank" value="4">4
                                        <input type="radio" name="rank" value="5">5
                                        <img src="/images/star.png" width="23" height="23" alt="" border="0">
                                        <p><input type="submit" value="Rank This Site" id="rank_submit"></p>
                                    </div>

                                    <div id="response" style="display:none;" >
                                        <h5>Loading...</h5>
                                        <img src='images/ajax_loader.gif' class='img_center'/>
                                    </div>
                                        </div>
                            <script>
                                        $("#rank_submit").click(function(){

                                          $("#ranking_wrapper").fadeOut(0);
                                            $("#response").fadeIn('slow');
                                            $("#response").fadeOut('slow',function(){

                                                 $("#ranking").html('<div id="response" style="display:none;"> Thanks you for ranking webca.</div>');
                                            });

                                        });
                            </script>

The problem is that as soon after the element is faded out, it doesnt add the div element to the ranking div.

         $("#response").fadeOut('slow',function(){

                                                 $("#ranking").html('<div id="response" style="display:none;"> Thanks you for ranking webca.</div>');
                                            });

the callback function isnt working..why?!!?

Upvotes: 0

Views: 140

Answers (4)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

  • be sure to execute the fadeOut when #response is already into the dom
  • be sure #ranking exists
  • the div you're injecting has display: none (so you cannot see it)

Upvotes: 1

fiberair
fiberair

Reputation: 651

Please remove

style="display:none;"

from your code.Its hiding your html.

Working demo at http://jsfiddle.net/XcPd5/.

Upvotes: 0

Sumit Neema
Sumit Neema

Reputation: 480

Why You have add the property style="display:none"

Replace the code 

$("#ranking").html('<div id="response" style="display:none;"> Thanks you for ranking webca.</div>');


 $("#ranking").html('<div id="response"> Thanks you for ranking webca.</div>');

Upvotes: 1

Huangism
Huangism

Reputation: 16438

Because you have this

<div id="response" style="display:none;">

You are changing the html into that, so it is display none and therefore you won't see it

Upvotes: 1

Related Questions