在本地主机上运行时，Javascript显示出不同的效果

Question

代码专家们怎么了？ 我在本地主机上运行时遇到问题。 当用户触发onclick事件时，将调用getModuleData() 。 在第一次加载页面时，module_list div隐藏，并且lastSelectedModule设置为-1。 现在，当用户单击“单击我”按钮时，它将调用getModuleData() 。 问题是，当我单击按钮时，它将首先加载新数据，然后淡出，然后再次淡入。 我真正想要发生的是淡出旧数据，然后淡入新数据。 我尝试使用console.log（）进行跟踪； 但是输出是。

不是阿贾克斯

阿贾克斯

不是阿贾克斯

阿贾克斯

html

一些代码

<a href='javascript:void(0);' onClick = 'getModuleData(sampleIdid)'><span>Click me</span>

<div id ="module_list"> 
      <div id ="module_content">

      </div>
</div>

javascript

function getModuleData(id)
{ 
    if(lastSelectedModule === -1){
       var off_set = $('#circular_navigation').offset().top;
       $('#module_list').show(1000,null);
       $('#hr_blue').show();
       animateScroll(off_set,800); 
    }

    if (lastSelectedModule !== id)
    {  
    console.log("Not Ajax");
    $('#module_content').fadeOut(1000,'',null);
    $('#loading').fadeIn(); 
    $('#module_icon_'+lastSelectedModule).removeAttr('style'); 
    document.getElementById('module_icon_'+id).style.cssText = '-moz-box-shadow: 0 0 0 10px #1589FF; -webkit-box-shadow: 0 0 0 10px #1589FF;  box-shadow: 0 0 10px #1589FF;';

        $.ajax({
              type: "GET",
              url: 'getModuleById.php',
              data: "module_id=" + id,  
              success: function(data) { 
              $('#loading').hide(); 
              $('#module_content').fadeIn(1000,null).html(data); 
              var targetOffset = $("#"+id).offset().top  - $('#circular_navigation').outerHeight(true); 
              animateScroll(targetOffset,800); 
                      console.log("Ajax");
            }
        }); 
        lastSelectedModule = id;
    }
}

Answer 1

现场演示

您可以使用fadeIn和fadeOut方法的回调参数来事后效果。 因此，执行所需操作的正确方法是淡出元素，然后使用回调将其更改并淡入。 例如：

$('#module_content').fadeOut(1000, function() {
    $(this).html('Some new text').fadeIn(1000);
});

http://api.jquery.com/fadeOut/