jQuery隐藏并显示动画错误

jQuery Hide and show animation bug

本文关键字：动画 错误 显示 隐藏 jQuery      更新时间：2023-09-26

http://invisiblewebdesign.co.uk/temp/dreamteam/

嗨。。上面的链接有一些内容的滑动div。基本上，我想要的是，当你点击更薄的div(只有更薄的一个(时，它会膨胀和收缩另一个。我已经尝试过做这件事，但我认为我做这件事情的方法不是很聪明。

有人能建议一个更明智的解决方案，希望更优雅。

感谢

Chris

JS:

$(document).ready(function () {
    $('.right').addClass('sidebar');
    $('.toggle').click(
    function()
    {   
        $('.left').toggleClass('sidebar');
        $('.right').toggleClass('sidebar');         
        if($('.right').is('.sidebar'))
        {               
            $('.left').animate(
            {
                width: 125,
            }, 
            {
                duration: 700,
                specialEasing: 
                {
                    width: 'easeInOutQuint',
                }
            });

            $('.right').animate(
            {
                width: 820
            }, 
            {
                duration: 700,
                specialEasing: 
                {
                    width: 'easeInOutQuint',
                }
            });     
        }
        if($('.left').is('.sidebar'))
        {       
            $('.left').animate(
            {
                width: 820,
            }, 
            {
                duration: 700,
                specialEasing: 
                {
                    width: 'easeInOutQuint',
                }
            });
            $('.right').animate(
            {
                width: 125,
            }, 
            {
                duration: 700,
                specialEasing: 
                {
                    width: 'easeInOutQuint',
                }
            }); 
        }       
    });

})；

简化脚本：

HTML:

<div class="content">
    <div class="left">    
        <div class="header">
            <h2>Users</h2>
        </div>
        <div class="content">
        </div>            
    </div>
    <div class="right">    
        <div class="header">
            <h2>Placements</h2>
        </div>    
        <div class="content">
        </div>                
    </div>   
</div>

CSS:

.left { float: left; }
.right { float: left; margin-left: 10px; }
.header { height: 40px; cursor: pointer;}
.content { height: 200px; }
.left { width: 820px; }
.right { width: 120px; }
.content h2 {
    color: white;
    font-size: 1em;
    font-weight: bold;
    float: right;
    padding: 10px;
}
.left .header { background-color: red; }
.left .content { background-color: pink; }
.right .header { background-color: green; }
.right .content { background-color: orange; }

jQuery:

$('.content .left').click(function() {
  myAnim('.right', '.left');
});
$('.content .right').click(function() {
  myAnim('.left', '.right');
});
function myAnim(small, big) {
    $(small).animate({
        width: 125,
    }, {
        duration: 700,
    });
    $(big).animate({
        width: 820
    }, {
        duration: 700,
    });
}

jsFiddle此处

这应该更顺利，更容易维护：

$(document).ready(function () {
        $('.right').addClass('sidebar');
        $('.toggle').click(
        function()
        {   
            $('.left').toggleClass('sidebar');
            $('.right').toggleClass('sidebar');         
            $(this).parent().animate(
                {
                    width: 820,
                }, 
                {
                    duration: 700,
                    specialEasing: 
                    {
                        width: 'easeInOutQuint',
                    }
            });
            $(this).parent().siblings().animate(
                {
                    width: 125,
                }, 
                {
                    duration: 700,
                    specialEasing: 
                    {
                        width: 'easeInOutQuint',
                    }
            }); 
        });
});

正如您所看到的，我们将扩展当前单击的标头，而不是对特定的类执行操作，并收缩他的其他兄弟姐妹(以防将来会有多个，但即使是2个，这也是最好的方法(

我还没有测试过它，但我已经尝试将您的代码减半，这应该会使它更容易维护。

$(document).ready(function () {
$('.right').addClass('sidebar');
$('.right').addClass('sidebarable');
$('.left').addClass('sidebarable');
var hideDistance = 125;
var showDistance = 820;
//this is so you click the hidden sidebar to show it,
//rather than clicking the one that is already visible
//and having it do that weird show//hide thing.
$('.toggle').parent(':not(.sidebar)').click(
function()
{   
    $('.left').toggleClass('sidebar');
    $('.right').toggleClass('sidebar');   
        $('.sidebarable:not(.sidebar)').animate(
        {
            width: hideDistance,
        }, 
        {
            duration: 700,
            specialEasing: 
            {
                width: 'easeInOutQuint',
            }
        });//hidden siderbar 

        $('.sidebar').animate(
        {
            width: showDistance
        }, 
        {
            duration: 700,
            specialEasing: 
            {
                width: 'easeInOutQuint',
            }
        });//active siderbar    
});//click toggle function
});//ready
相关文章：