Question

我的链条的第一部分与.click()事件相关联：slideDown()但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>

Answer 1

它不起作用

可能是所有错误描述中最糟糕的。但是，你期望在这里发生什么？

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

这将向下滑动#twitter_box，之后，它会将其淡化为opacity 1（100％）。 .slideDown()将显示一个元素（100％不透明度），结论：.fadeTo()尝试从100％淡化为100％=完全没有效果。

.fadeTo()期望从0.01到1.00的值。

jquery fadeTo链不起作用

1 个答案: