Question

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

不是Ajax

的Ajax

不是Ajax

的Ajax

的 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

的 Live demo

您可以使用fadeIn和fadeOut方法的回调参数在效果后立即执行操作。因此，正确的方法来做你想要的是淡化元素然后改变它并使用回调淡化它。例如：

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

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

在localhost中运行时，Javascript显示不同的效果

1 个答案: