Question

我正在尝试使用javascript / jquery构建一个库，其中全尺寸图像从右侧滑出。我设法使该功能正常工作，但我现在面临另一个问题：当全尺寸图像滑出以适应其宽度时，我需要图库的父块（#content）进行扩展。将其CSS宽度设置为“auto”失败，因此我在Jquery中尝试了几种不同的方法。到目前为止，没有骰子。

这是我正在使用的代码。任何建议将不胜感激。

        $(document).ready(function() {
        $('#back').hide();
        $('#full-wrap').hide();
        $('#thumb-wrap a').children().not('img').hide();//hide image captions

        $('#thumb-wrap a').click(function(){

            var $big = $(this).index(); //get 0-based index of the thumb that was just clicked

            $('#thumb-wrap').hide(); //hide the thumbnails
            $(this).children().not('img').clone().appendTo($('#gallery-wrap')).wrapAll('<article/>').show(); //Clone the image captions and wrap them in an article
            $('#back').fadeIn(500); //make the back button appear

            $('#full-wrap img').eq($big).siblings().hide(); //Hide all fullsized images that don't match the index of the clicked thumb
            $('#full-wrap img').eq($big).show().css({background: '#603'}); //reveal fullsized image that does match the index of the clicked thumbnail

            var moveIt = parseInt($("#thumb-wrap").outerWidth()); //Get the width of the right div
            $("#content").width($("#content").width() + moveIt);//Extend #content by an area equal to the size of the thumb-wrap
            $('#full-wrap').show().animate({ right: '+=' + moveIt + 'px'}, 'slow'); //slide out by a distance equal to the width of thumb-wrap.

        });

        $('#back').click(function(){
            $('article').remove();//remove the article div
            $('#thumb-wrap').fadeIn(500);//reveal the thumbnails
            $('#full-wrap').delay(300).animate({right: '0', opacity: 'toggle'}, 400);//hide the fullsize image div
            $(this).fadeOut(600);//hide the back button
        });

     });

Answer 1

在匹配的项目上使用jQuery parent（）并将其设置为滑出的图像的宽度和高度。

Answer 2

我认为这条线不起作用

$("#content").width($("#content").width() + moveIt);

可能希望将css更改为section#content { left:%20; }或略低于43％的内容？

此外，我认为你的#wrap-wrap动画缺少一些引号。我查看了jQuery文档，并将它们的css值包装在这样的引号中：

$('#full-wrap').show().animate({ "right" : "+=" + moveIt + "px"}, 'slow');

以及完整包装回滚动画：

$('#full-wrap').delay(300).animate({"right": '0', opacity: 'toggle'}, 400);//hide the fullsize image div

还要确保moveIt包含整数值。在计算var moveIt之后添加alert(moveIt);并确保它应该是什么。

Answer 3

解决了！我认为这个问题与我在CSS中设置容器的最大和最小宽度有关，但是在盯着它这么长时间后我想不出如何更改这些设置并仍然达到我想要的效果。经过一段时间的睡眠 - 感谢@Emmanuel关于左侧位置动画的建议 - 我提出了这个解决方案：

var moveIt = parseInt($("#thumb-wrap").outerWidth()); //Get the width of the thumb-wrap div
$('#content').animate({'maxWidth': '+=' + moveIt + 'px', 'left': '6%'}, 'fast'); //expand max-width by a length equal to #thumb-wrap

并且，在单击#back时再次将其缩小：

$('#content').animate({'maxWidth': '360px', 'left' : '43%'}, 'slow');

这与CSS中的一些变化一起，让我扩展了容器div。感谢大家的帮助！

儿童扩展时容器的动画宽度

3 个答案: