0

代码人有什么问题。我在本地主机上运行它时遇到问题。当getModuleData()用户触发 onclick 事件时调用。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;
    }
}
4

1 回答 1

0

Live demo

您可以使用回调参数fadeIn和fadeOut方法在效果后立即执行某些操作。所以，做你想做的事情的正确方法是淡出元素，然后改变它并使用回调淡入它。例如：

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

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

于 2013-04-16T02:43:00.740 回答