代码专家们怎么了? 我在本地主机上运行时遇到问题。 当用户触发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;
    }
}

===============>>#1 票数:0 已采纳

现场演示

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

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

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

  ask by Snippet translate from so

未解决问题?本站智能推荐: