Question

请参阅：http://jsfiddle.net/neowot/z1xxsu8t/2/（准备一个丑陋的网站，哈哈）

单击下拉列表并选择＆＃34; 1＆＃34;。然后在文本框中键入内容并按Enter键。你应该看到＆＃34; LeftPanel＆＃34; div现在。

现在点击圆形天蓝色按钮。这是问题的开始。

LeftPanel的宽度根据需要减小。但是，而不是RightPanel和SideBarSearchDiv同时平滑地消失，它们的行为非常奇怪。

再次点击圆形按钮时，会发生同样奇怪的行为。

有问题的JS代码在评论＆＃34;相关代码在这里＆＃34;。

我试图通过使用注释＆＃34; Try2＆＃34;下的代码来解决这个问题。 第一次点击按钮时，该代码非常有效，但第二次点击时仍然会出现故障。

我可以获得帮助，让toggleWidth和fadeToggle动画顺利运行并且看起来不错吗？只要它看起来合适，它们就不一定必须同时运行。

谢谢。

//Relevant Code Here

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


        /*Try 1 */
        var toggleWidth = $("#LeftPanel").width() == 380 ? "1000px" : "380px"; 
        $('#LeftPanel').animate( {'width': toggleWidth}, 1000);              
        $('#SideBarSearchDiv').fadeToggle(500, resize);
        $('#RightPanel').fadeToggle(500, resize);   




        /*Try 2
        var toggleWidth = $("#LeftPanel").width() == 380 ? "1000px" : "380px"; 
        $('#LeftPanel').animate( {'width': toggleWidth}, 1000, function() {
                $('#SideBarSearchDiv').fadeToggle(500, resize);
                $('#RightPanel').fadeToggle(500, resize);                           
        }); */

    });

Answer 1

我认为你只能通过一种行为来处理它，有很多事情要发生，而且由于你用子元素动画一个父元素，因此很难遵循。

但是你已经有一个if条件，所以一个解决方案就是使用它来制作不同的动画来显示和隐藏。像这样：

if ($("#LeftPanel").width() == 1000) {

            $('#LeftPanel').animate({
                'width': '380px'
            }, 1000, function () {
                $('#SideBarSearchDiv').fadeToggle(500, resize);
                $('#RightPanel').fadeToggle(500, resize);
            });
        } else {

            $('#SideBarSearchDiv, #RightPanel').fadeToggle(500, function () {
                $('#LeftPanel').animate({
                    'width': '1000px'
                }, 1000);
                resize

            });
        }

参见jsfiddle：http://jsfiddle.net/psxrwh7s/

fadeToggle与动画结合时出现故障：宽度？

1 个答案: