jquery fadeTo链不能正常工作

我的链条的第一部分连接到.click()事件：slideDown()但是fadeTo()部分没有。jquery fadeTo链不能正常工作

<script src="http://code.jquery.com/jquery-latest.js"></script> 

<script> 

$(document).ready(function() 
{ 
    $('#contact').click(function() 
    { 

     $('#contact_box').remove(); 

     $('.menu_item_content').prepend('<div class="menu_box" id="contact_box">Contact INFO goes in this box.</div>'); 

     $('#contact_box').slideDown('slow', function() 
     { 
      $(this).fadeTo('slow', 1, function() 
      { 
      }); 
     }); 

    }); 

    $('#about').click(function() 
    { 

     $('#about_box').remove(); 

     $('.menu_item_content').prepend('<div class="menu_box" id="about_box">About info goes in this box.</div>'); 

     $('#about_box').slideDown('slow', function() 
     { 
      $(this).fadeTo("slow", 1, function() 
      { 
      }); 
     }); 
    }); 

    $('#twitter').click(function() 
    { 

     $('#twitter_box').remove(); 

     $('.menu_item_content').prepend('<div class="menu_box" id="twitter_box">Twitter</div>'); 

     $('#twitter_box').slideDown('slow', function() 
     { 
      $(this).fadeTo("slow", 1, function() 
      { 
      }); 
     }); 
    }); 


    // 
    //remove single items 
    // 
    $(".menu_item_content").delegate("#contact_box", "click", function() 
    { 
     $(this).remove(); 
     //$('#contact_box').remove(); 
    }); 


    $(".menu_item_content").delegate("#about_box", "click", function() 
    { 
     $(this).remove(); 
     //$('#about_box').remove(); 
    }); 

    $(".menu_item_content").delegate("#twitter_box", "click", function() 
    { 
     $(this).remove(); 
     //$('#twitter_box').remove(); 
    }); 
}); 




</script> 

<style> 

.menu_item 
{ 
    position:relative; 

    display:inline; 
    font-family:Tahoma; 
    font-size:20px; 
} 
.menu_spacer 
{ 
    display:inline; 
    font-family:Tahoma; 
    font-size:45px; 
} 

.menu_box 
{ 
    display:none; 
} 

</style> 

<div class="menu"> 
    <div class="menu_items"> 
     <div class="menu_item" id="contact">CONTACT</div> 
     <div class="menu_spacer">/</div> 
     <div class="menu_item" id="about">ABOUT</div> 
     <div class="menu_spacer">/</div> 
     <div class="menu_item" id="twitter">TWITTER</div> 
    </div> 

    <div class="menu_item_content"> 
    </div> 
</div>

来源

2010-07-13 ian

它不工作

也许是最糟糕的错误描述。但是，你期望在这里发生什么？

$('#twitter_box').slideDown('slow', function() 
    { 
     $(this).fadeTo("slow", 1, function() 
     { 
     }); 
    });

这将下滑#twitter_box，并在此之后，它会将其褪色opacity 1（100％），它已经应该的。 .slideDown()将显示元素（100％不透明度），结论：.fadeTo() trys从100％褪色到100％=完全没有效果。

.fadeTo()预计值从0.01到1.00。

来源

2010-07-13 07:04:21 jAndy

嗯，我不知道有多少清除我可以比'fadeTo（）'链的一部分不衰减要...这个代码是从我的另一个功能页面复制的地方，因为它的元素淡入滑落。我试着切换它，所以'fadeTo（）'首先被触发，然后''slideDown（）'，但在这种情况下'slideDown（）'不会触发。 – ian 2010-07-13 07:12:45

@jAndy +1 - 尽管'.fadeTo（duration，opacity [，callback]）'预计在0（不是0.01）和1之间的不透明度值，按照[jQuery API]（http://api.jquery.com/ fadeTo /） – Chris 2012-06-14 18:02:57

jquery fadeTo链不能正常工作

回答

相关问题