Q: animation issue by toggle while am clicking the click button the container 3 disappears and it appears again when clicked, during this, transition between container 3 and continer 4 there is a white gap occurs and disappears. how to fix it.
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');

            }
        }

    });
});


A: Any how if we are going with margin property using jQuery animation we will have some white space and the same we can also achive with toggling width. Try this fiddle
$('button').click(function() {    
    $(".delet").animate({width:'toggle'},350);        
})

