切换动画问题

Question

当点击点击按钮时，容器3消失并且在点击时再次出现，在此期间，容器3和连接器4之间的过渡发生白色间隙并且消失。如何解决它。

http://jsfiddle.net/wxab9Ldn/16/

JS

$(document).ready(function () {
    var evenH = 0;
    $('.row .small-4').each(function(){
        var getH = $(this).outerHeight();
        if(getH > evenH)
            evenH = getH;
    });
    $('.row .small-4').css({'height':evenH});

    var slider_width = $('.pollSlider').width();
    $("button").click(function () {
        var effect = 'slide';
        var options = {
            direction: 'left'
        };
        var duration = 700;
        $('.delet').toggle(effect, options, duration);
        //$('.popUp').addClass("popUp2");
        if ($(this).css("margin-right") == slider_width + "px" && !$(this).is(':animated')) {
            $('.pollSlider,button').animate({
                "margin-right": '-=' + slider_width
            }, 'slow');

        } else {
            if (!$(this).is(':animated')) //perevent double click to double margin
            {
                $('.pollSlider,button').animate({
                    "margin-right": '+=' + slider_width
                }, 'slow');

            }
        }

    });
});

Answer 1

如果我们使用jQuery动画我们将使用margin属性，我们将有一些空白和相同的我们也可以实现切换宽度。试试这个fiddle

$('button').click(function() {    
    $(".delet").animate({width:'toggle'},350);        
})