Question

当我在切换的前一半效果链中取消注释行toggle()时，我的$('.comments').slideUp('slow');下面会中断。

当我将此代码及相关的CSS和HTML复制到他们自己的页面时，一切正常，就像在同一页面上切换其他元素的相同代码片段一样。

我在萤火虫中没有任何错误或任何内容，是否有人知道为什么slideUp()会导致toggle()的后半部分中断？

$('#show_hide_comments').toggle(function()
    {
        //alert('1');
        $('#show_hide_comments').attr('src','images/up.png');

        $('.comments').fadeTo('slow', 0.01, function()
        {
            //$('.comments').slideUp('slow');
        });

    },function()
    {
        $('#show_hide_comments').attr('src','images/down.png');

        $('.comments').slideDown('slow', function()
        {
            $('.comments').fadeTo('slow', 1);
        });
    });

以下完整代码：

<?

    //include_once '../cookie_factory.php';
    include_once '../connect.php';
?>

<style>


    .comments_container
    {
        position:relative;
        top:240px;
        left:15px;
    }

    .show_hide_comments
    {
        padding-left:10px;
    }
    .comments
    {

        position:relative;
        width:900px;
        background-color:#CCC;
        padding-bottom:10px;

        border-radius:5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;

    }


    .new_comment
    {
        position:relative;
        padding-bottom:30px;
        padding-left:10px;
        display:inline;
    }


    .new_comment input 
    {
        font-family:Tahoma;
        font-size:12px;
        width:585px;
        height:25px;
        border-style: solid, 2px;
        border-color:#000;
    }
    .author
    {
        padding-top:15px;
        padding-left:10px;
        display:inline;
    }
    .author input
    {
        font-family:Tahoma;
        font-size:12px;
        width:80px;
        height:25px;
        border-style: solid, 2px;
        border-color:#000;

    }
    .email
    {
        padding-top:15px;
        padding-left:10px;
        display:inline; 
    }
    .email input
    {
        font-family:Tahoma;
        font-size:12px;
        width:155px;
        height:25px;
        border-style: solid, 2px;
        border-color:#000;  
    }
    .comment_check
    {
        position:relative;
        display:inline;
        padding-left:5px;
        top:2px;
    }

    .captcha
    {
        position:relative;
        top:5px;
        display:none;
        padding-left:10px;      
    }

    .captcha_statment
    {

        display:inline;
        font-family:Tahoma;
        font-size:14px;
    }
    .captcha_response
    {
        display:inline;
        padding-left:5px;
    }
    .captcha_response input
    {
        font-family:Tahoma;
        font-size:14px;
        width:50px;;
        height:25px;
        border-style: solid, 2px;
        border-color:#000;
    }
    .captcha_check
    {
        position:relative;
        display:inline;
        padding-left:5px;
        top:2px;

    }
    .captcha_result
    {
        display:inline;
        font-family:Tahoma;
        font-size:14px;
        padding-left:5px;
    }
    .the_comments
    {
        padding-top:10px;
        padding-left:10px;
        font-family:Tahoma;
        font-size:12px;
    }
    .full_comments_toggle
    {
        padding-top:10px;
        font-family:Tahoma;
        font-size:12px;
    }
    .full_comments
    {
        padding-top:10px;
        display:none;
    }

</style>

<script src="jquery-1.4.2.min.js"></script>

<script>

$(document).ready(function()
{
$('#comment').keyup(function()
        {

            // get new length of characters
            var length = $(this).val().length;
            var content = $(this).val();               

            //if the comment field has at least 1 character AND is not the original value then enable the submit button
            if ( length >= 1 && content != "your comment here...")
            {

                $('#comment_check').removeAttr('disabled');
                $('#comment_check').attr('src','images/check.png');


            }
            else if ( length == 0 || content == "your comment here...")
            {
                $('#comment_check').attr('disabled', 'disabled');
                $('#comment_check').attr('src','images/uncheck.png');
            }
        });

        $('#comment_check').click(function()
        {
            //alert('show captcha');
            $('.captcha').css( 'display', 'inline' );
        });

        //get the captcha value and check to see if it is correct. if it is, submit
        $('#captcha_check').click(function()
        {   

            $('#captcha_check').attr('disabled','disabled');
            $('#captcha_check').attr('src','images/uncheck.png');

            var captcha = $('#captcha_response').val();
            var comment = $('#comment').val();
            var name = $('#name').val();
            var email = $('#email').val();

            //rating = rating.substr(5);

            $.ajax({
                type: "GET",
                url: "ajax/check_captcha.php",
                data: ({ captcha:captcha , comment:comment , name:name , email:email }),
                dataType: "json",
                success: function(data)
                {

                    //alert( data );

                    if( data == 'success')
                    {
                        $('.captcha_result').css('color','black');
                        $('.captcha_result').html('Comment submitted for aproval.');
                    }
                    if( data == 'fail')
                    {

                        $('#captcha_check').removeAttr('disabled');
                        $('#captcha_check').attr('src','images/check.png');

                        $('.captcha_result').css('color','red');
                        $('.captcha_result').html('Uh no...');
                    }

                    //on success set... the average rating.. and yelllow stars
                    //var count = 0;
                }
                ///$(".average").html( "Average rating of " + data[0] + " votes: " + data[1] );
            });
        });

        //$("input, textarea").focus(function()
        //{
            // only select if the text has not changed
        //  if(this.value == this.defaultValue)
        //  {
        //      this.select();
        //  }
        //});

        $("input, textarea").click(function()
        {
            // only select if the text has not changed
            if(this.value == this.defaultValue)
            {
                this.select();
            }
        });


        //toggle to show/hide comments

        $('#show_hide_comments').toggle(function()
        {
            $('#show_hide_comments').attr('src','images/up.png');

            $('.comments').fadeTo('slow', 0.01, function()
            {
                $(this).slideUp('slow',function()
                {
                });
            });
        }, function()
        {
            $('#show_hide_comments').attr('src','images/down.png');

            //alert('wtf');

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


        //toggle to show full comments
        $('#full_comments_toggle').toggle(function() 
        {

            $('#full_comments_toggle').attr('src','images/down.png');

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

        }, function() 
        {

            $('#full_comments_toggle').attr('src','images/up.png');

            $('.full_comments').fadeTo('slow',0.01, function() 
            {
                $(this).slideUp("slow", function()
                {
                });
            });
        });
});
</script>



<div class="comments_container">

<div class="show_hide_comments"><img id="show_hide_comments" src="images/down.png" width="19" height="10" alt="Expand" />

    <div class="comments">
        <div class="new_comment_container">
            <div class="new_comment"><input id="comment" name="comment" type="text" value="your comment here..."></div>
            <div class="author"><input id="name" name="name" type="text" value="your name"></div>
            <div class="email"><input id="email" "name="email" type="text" value="your email"></div>

            <div class="comment_check"><input id="comment_check" type="image" src="images/uncheck.png" HEIGHT="16" WIDTH="16" BORDER="0" ALT="Submit Comment!" DISABLED></div>
        </div>   

        <div class="captcha">
            <div class="captcha_statment">Mostly Dirty, Always:</div><div class="captcha_response"><input id="captcha_response" name="captcha_response" type="text" value="" size="5" maxlength="5"></div>
            <div class="captcha_check"><input id="captcha_check" type="image" src="images/check.png" HEIGHT="16" WIDTH="16" BORDER="0" ALT="Submit Captcha!"></div>
            <div class="captcha_result"></div>
        </div>

        <div class="the_comments">
            <?php

                $query = mysql_query("SELECT * FROM comments WHERE approved = 1 LIMIT 3");  

                while($comments = mysql_fetch_array($query))
                {
                    $date = date( 'F jS', strtotime($comments['date']));

                    echo '<div class="comment" id="'.$comments[id].'">'.$date.' - '.$comments[comment].' - '.$comments[name].'</div>';
                }
            ?>

            <div class="full_comments_toggle"><img id="full_comments_toggle" src="images/up.png" width="19" height="10" alt="Expand" />
            <?  
                $query = mysql_query("SELECT * FROM comments WHERE approved = 1 LIMIT 3,10000");    
                $count = mysql_num_rows($query);

                echo 'Show '. $count . ' more comments.';
            ?>

            </div>

            <div class="full_comments">
            <?php

                while($comments = mysql_fetch_array($query))
                {
                    $date = date( 'F jS', strtotime($comments['date']));

                    echo '<div class="comment" id="'.$comments[id].'">'.$date.' - '.$comments[comment].' - '.$comments[name].'</div>';
                }
            ?>
            </div>
        </div>
    </div>


</div>
</div>

Answer 1

您应该在回调中使用this而不是选择器，如下所示：

$('#show_hide_comments').toggle(function() {
    //alert('1');
    $('#show_hide_comments').attr('src','images/up.png');

    $('.comments').fadeTo('slow', 0.01, function()
    {
        $(this).slideUp('slow');
    });

},function()
{
    $('#show_hide_comments').attr('src','images/down.png');

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

如果你不这样做（使用选择器），并且你说10 .comments个元素，那么动画队列就会发生不好的事情。您必须记住每个动画元素的回调触发器，因此如果10 .comments淡出，则每个的每个队列都会.slideUp()再次.comments元素，突然导致100个动画，而不是10个。

使用$(this)，您正在为刚刚完成淡出的元素调用.slideUp()，而不是其他任何元素。

实际上，在第二个想法，有动画，他们可以排队，像这样：

$('#show_hide_comments').toggle(function() {
  $(this).attr('src','images/up.png');
  $('.comments').fadeTo('slow', 0.01).slideUp('slow');
}, function() {
  $(this).attr('src','images/down.png');
  $('.comments').slideDown('slow').fadeTo('slow', 1);
});

如果你像这样立即添加到队列中，你得到的结果是否相同？

还有一点需要注意，这里有一些无效的HTML：

<input id="email" "name="email" type="text" value="your email">

您应该在"之前删除额外的name="email"以避免其他问题：）

Answer 2

对我来说，这在Firefox 3.6，Chrome 5和IE 8中都有效（有和没有DOCTYPE，我建议你也添加，因为很多原因）。我拿了你的代码并将其作为静态HTML用于测试目的。

如果你快速连续反复点击它会破坏但是那是因为你没有正确处理动画队列。这是stop()动画的一个好习惯。你甚至不必重复这样做。如果你快速点击它两次，你也可以打破它。

此外，在内部事件处理程序中，您通常希望使用this来引用事件的来源（如果不是事件对象中的源）而不是重新选择，这可能是无法预料的（并且通常是不希望的））后果。

最后，动画可以直接排队，而无需使用回调。

尝试：

$('#show_hide_comments').toggle(function() {
  $(this).attr('src','images/up.png');
  $('div.comments').stop().fadeTo('slow', 0.01).slideUp('slow');
}, function() {
  $(this).attr('src','images/down.png');
  $('div.comments').stop().slideDown('slow').fadeTo('slow', 1);
});

并告诉我会发生什么。

链式效应的可能原因会打破jquery的切换？

2 个答案: