Question

每当点击div导致容器调整大小并隐藏和显示内容时，我就会对子div和兄弟姐妹运行一系列动画。出于某种原因，当点击动画时，动画将完美地发生，但内容将无法隐藏。

这有两个部分。将所有内容恢复为原始状态的函数（closeService）。在这个函数中，被称为“DROP DOWN INFO”的部分很可能无法触发。

function closeService() {

    $('.graphic-wrapper').animate({ "width": "275px"}, 500);
    $('.div-1').animate({ "width": "25%" }, 500);
    $('.div-2').animate({ "width": "25%" }, 500);
    $('.div-3').animate({ "width": "25%" }, 500);
    $('.div-4').animate({ "width": "25%" }, 500);
    $('.graphic-1').animate({"height": "200px"}).attr("src", "images/svg-icons/1.svg");     
    $('.graphic-2').animate({"height": "200px"}).attr("src", "images/svg-icons/2.svg");
    $('.graphic-3').animate({"height": "220px"}).attr("src", "images/svg-icons/3.svg");
    $('.graphic-4').animate({"height": "170px"}).attr("src", "images/svg-icons/4.svg");
    $('.services-content').hide();

    // DROP DOWN INFO
    $('.dropdown-1').hide();
    $('.dropdown-2').hide();
    $('.dropdown-3').hide();
    $('.dropdown-4').hide();
    $('.dropdown-info').hide();
    $('.services-content').hide();

    setTimeout ( function() {
        $('.dropdown-default').fadeIn();
        $('.plus-sign').fadeIn();
        $('.services-text').fadeIn();
    }, 500);

}

第二部分是动画发生的地方。我正在使用切换功能来激活动画。有时，该部分的前2行被评为“动画其他容器”。

$('.div-1').toggle(function() {
    // Animate this container
    $(this).animate({ "width": "830px" }, 501);
    $('.graphic-1').animate({"height": "200px"}).attr("src", "images/svg-icons/1.svg");
    $(this).children('.graphic-wrapper').animate({ "width": "275px"}, 500);
    $(this).find('.services-text').show();
    $(this).children('.services-content').fadeIn(2000);

    // Animate other containers
    $(this).siblings().children('.services-content').hide();
    $('.plus-sign').hide();
    $(this).siblings().animate({ "width": "90px" }, 500);
    $(this).siblings().children('.graphic-wrapper').animate({ "width": "90px" }, 500);
    $(this).siblings().children('.graphic-wrapper').children('.services-text').hide();
    $('.graphic-2').animate({"height": "60px"}).attr("src", "images/svg-icons/2b.svg");
    $('.graphic-3').animate({"height": "60px"}).attr("src", "images/svg-icons/3b.svg");
    $('.graphic-4').animate({"height": "60px"}).attr("src", "images/svg-icons/4b.svg");

    // Show new content
    setTimeout( function() { 
        $('.dropdown-default').fadeOut('fast');
        $('.dropdown-2').fadeOut('fast');
        $('.dropdown-3').fadeOut('fast');
        $('.dropdown-4').fadeOut('fast');
        setTimeout( function() {
            $('.dropdown-1').fadeIn();
            $('.dropdown-info').fadeIn();
        }, 500);
    }, 600);
}, function() {
    if ( $('.div-1').css("width") == open ) {
        closeService();
    } else {
        // REPEAT THE FIRST BLOCK OF CODE ABOVE
    }
});

该脚本适用于大多数情况，但是当我在测试期间点击它时，它会因为我上面列出的原因而中断，我无法确定原因。我还没弄清楚是否有某种点击模式导致它破坏。可能导致这种情况的任何想法？

JS偶尔也无法隐藏点击内容

0 个答案: