jQuery-执行事件，以便一个接一个地

后我已经一段代码，其被设计为： ON（“点击”）jQuery-执行事件，以便一个接一个地

淡出元件1
淡入元件2

它看起来像：

<html> 
    <head> 
     <style> 
     #element1 {width:200px; height:200px; background-color:red; } 
     #element2 {width:200px; height:200px; background-color:green; display:none; } 
     </style> 

     <script language="JavaScript" src="jquery-min.js" type="text/javascript"></script> 
     <script> 
      $(document).ready(function() 
      { 
       $('body').on('click','#element1',function() 
       { 
        $('#element1').fadeOut('slow'); 
        $('#element2').fadeIn('slow'); 
       }); 

       $('body').on('click','#element2',function() 
       { 
        $('#element2').fadeOut('slow'); 
        $('#element1').fadeIn('slow'); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="element1">element1</div> 
     <div id="element2">element2</div> 
    </body> 
</html>

的问题是，单击它时，他们的衰落都是S- imultaneously。有没有办法让它首先执行fadeOut，只有一次完成，然后是fadeIn？

来源

2013-12-23 IGGt

您可以使用callback这样的：

$('#element1').fadeOut('slow', function() { 
    $('#element2').fadeIn('slow'); 
});

来源

2013-12-23 10:29:34 Felix

欢呼，这样一个简单的变化，它的伟大工程。 – IGGt

添加一个触发一次的淡出已完成，像这样一个功能：

$('#element1').fadeOut('slow', function(){ 
    $('#element2').fadeIn('slow'); 
});

来源

2013-12-23 10:30:03 Alex

虽然你需要使用你的其他选择以淡出的回调函数的fadeIn方法。然而，你可以按照下面的方式在一个选择器中做一些事情。

试试这个：

$(document).ready(function(){ 
    $('body').on('click','[id^="element"]',function(){ 
     if(this.id === "element1"){ 
      $('#element1').fadeOut('slow', function(){ 
       $('#element2').fadeIn('slow'); 
      }); 
     }else{ 
      $('#element2').fadeOut('slow', function(){ 
       $('#element1').fadeIn('slow'); 
      }); 
     } 
    }); 
});

Try the demo fiddle

来源

2013-12-23 10:33:46 Jai

jQuery-执行事件，以便一个接一个地

回答

相关问题