Question

我创建了一个单击图像的元素，内容在其下面填充（有点像谷歌图片搜索），我已经完成了90％，除了动画跳到了首先单击，而不是增加内容容器的高度。我无法弄清楚为什么会这样：单击它并关闭它后，动画会很好地滑下来。

我做了小提琴，因为它非常大

jquery代码是这样的：

jQuery(document).ready(function ($) {
    var $content = $(".featured_portfolio");
    var $loaded_content = $("#portfolio_content_details");
    var $item_selector = $(".featured_item");
    var $close = $("#close_wrapper");

    $(document).on('click', '#close_wrapper', function (e) {
        e.preventDefault();
        $loaded_content.animate({
            height: 0
        }, 500, "linear")
        setTimeout(function () {
            $loaded_content.hide()
        }, 500);
        $('#pointer').hide();
    });

    $content.imagesLoaded(function () {
        $item_selector.on('click', function () {
            leftOffset = parseInt($(this).offset().left + $(this).width() / 2, 10);
            $('#pointer').css({
                'left': leftOffset,
                'display': 'inline-block'
            });

            if (!$(this).hasClass("current")) {
                $(".current").removeClass("current");
                $(this).addClass("current");
            }

            var element_number = $(this).data('number');
            var insert_after = (Math.ceil(element_number / 4) * 4) - 1;

            $loaded_content.detach().insertAfter($item_selector.eq(insert_after));

            var thumbnail = $(this).data('thumbnail');
            var name = $(this).data('name');
            var link_to = $(this).data('link_to');
            var date = $(this).data('date');
            var description = $(this).data('description');
            var cat = $(this).data('cat');
            var client = $(this).data('client');
            var skills = $(this).data('skills');

            $loaded_content.find('.gallery_post_image').html(thumbnail);
            $loaded_content.find('.gallery_post_title').html(name);
            $loaded_content.find('.gallery_post_linkto a').attr("href", link_to);
            $loaded_content.find('.gallery_post_date').html(date);
            $loaded_content.find('.gallery_post_description p').html(description);
            $loaded_content.find('.gallery_post_category .cat_names').html(cat);
            $loaded_content.find('.gallery_post_client .client_names').html(client);
            $loaded_content.find('.gallery_post_skill .skills_names').html(skills);

            setTimeout(function () {
                if (!$(this).hasClass("current")) {
                    $loaded_content.show().animate({
                        height: "560px"
                    }, 500, "linear");
                    $('html, body').animate({
                        scrollTop: $loaded_content.offset().top - 300
                    }, 500);
                }
            }, 500);
        });
    });
});

如果你点击同一张图片，我也试过把它关闭，但没有运气。我点击图片时添加了一个类current，当我在点击事件中关闭该类时，没有任何反应。

感谢任何帮助。

Answer 1

答案是将#portfolio_content_details的显示设置为阻塞，将高度设置为0（并且您必须处理指针的初始显示），一般来说，您的解决方案在性能上非常糟糕对于一个非常基本的问题，这是一个非常复杂的解决方案。

正如kursus所建议的，在之前正确设置所有内容然后只使用js来隐藏和显示更多信息将是一个更好的方法。

一般提示：而不是使用$（this）几次只需定义一个局部变量 var $ this = $（this）;

现在jQuery每次执行此函数时都不会创建新的$（this）。

第一次单击时跳转动画，第二次正常

1 个答案: