Search code examples
javascriptjqueryhtmlshowfadein

fadeIn works as show() in some div's

I'm using jquery in my webpage but fadeIn and fadeOut doesn't work after the first two times. i had tried with show(500,...), hide and animate, with easing and without it, but it behaves the same. here is one of the div's i want to fadeIn

    <div id="rfcdiv" style="position: absolute; display: none" >  
<img alt="Ticket" src="images/DATOSfiscales.png" style="position:absolute;width:fit-content;left:0px;top:230px;z-index:18"></img>
<div id="text1" style="position:absolute; overflow:hidden; left:45px; top:341px; width:37px; height:21px; z-index:20"><div class="wpmd"><div><font face="Myriad Pro Light"><B>RFC:</B></font></div></div></div>
<input name="RFC" id="RFC" type="text" maxlength=13 value="<?php if (isset($_GET['rfc'])){echo $_GET['rfc'];}?>" style="position:absolute;width:276px;left:79px;top:340px;z-index:13">
<div id="ValidacionRfc" style="position:absolute; overflow:hidden; left:360px; top:341px;width: fit-content;height: fit-content;z-index:14;display: none" onmouseover="mostrarglobo(1)" onmouseout="mostrarglobo(0)"></div>

here is the code that shows it:

 $("#image1").animate({ height: "450px" }, 800, function () {
 $("#ingresarfolio").animate({ top: "170px" }, 800,  function () {
      $('#rfcdiv').fadeIn(500, function () {
                           recheck_ticket(1);
      });
   });

});

you can try here: MyPage (just pressing Enter on the textbox)

//apologize about my english

edit: When the page loads it fades in correctly, if you put a leter on the textbox it will fadein an icon correctly but when you only press enter it will just appear after a time.

Sorry, i cant show the code correctly so the code is the first commented code in MyPage

Solution

  • In you script (facturar.js)

    the fadeIn syntax is 

    $('#rfcdiv').fadeIn(function () {
                   recheck_ticket(1);
 }, 2000);

    try changing it to

    $('#rfcdiv').fadeIn(2000, function () {
                recheck_ticket(1);
     });

    Refer .fadeIn()

    Then,

    Remove position:absolute from all components inside #rfcdiv and let them placed in document flow.

    and position #rfcdiv whereever you want by applying position:absolute, top and left to it.

    like this

    #rfcdiv {
  display: none;
  position: absolute;
  top: 150px;
  z-index: 999;
  left: 10px;
}