jquery - 当用户在 jQuery 中调整网站时更改手风琴元素的宽度

Question

我想将宽度从 % 更改为元素手风琴的宽度 - 244px（手风琴右侧元素的总大小）。

 $(function() {
        $('.accordion > li').hoverIntent(
                function () {
                    var $this = $(this);

              >>>  $this.stop().animate({'width':'80%'},500);   <<<

                    $('.heading',$this).stop(true,true).fadeOut();
                    $('.bgDescription',$this).stop(true,true).slideDown(500);
                    $('.description',$this).stop(true,true).fadeIn();
                },
                function () {
                    var $this = $(this);
                    $this.stop().animate({'width':'5em'},1000);
                    $('.heading',$this).stop(true,true).fadeIn();
                    $('.description',$this).stop(true,true).fadeOut(500);
                    $('.bgDescription',$this).stop(true,true).slideUp(700);
                }
        );
    });

我刚在想：

var accordwidth = $("accordion").width() -244;
$this.stop().animate({'width':accordwidth },500);

但它不起作用。

Answer 1

<script type="text/javascript">
    $(function() {
        $('.accordion > li').hoverIntent(
                function () {
                    var $this = $(this);
                    var wide1 = $('body').width();
                    var wide2 = $('li.bg1').width()*3;
                    var wide3 = wide1 - wide2 - 4;
                    $this.stop().animate({'width':wide3},500);
                    $('.heading',$this).stop(true,true).hide();
                      $('.bgDescription',$this).stop(true,true).slideDown(500);
                    $('.description',$this).stop(true,true).fadeIn();
                },
                function () {
                    var $this = $(this);
                    $this.stop().animate({'width':'5em'},500);
                    $('.heading',$this).stop(true,true).fadeIn();
                    $('.description',$this).stop(true,true).fadeOut(500);
                    $('.bgDescription',$this).stop(true,true).slideUp(700);
                }
        );
    });
</script>

我相信它可能是一种更好的语法，但它可以工作。wide1 是手风琴的父元素，wide2 是手风琴的三个元素占用的空间（4 个元素），wide3 是我从正文中减去另外三个元素占用的空间 + 这些元素的边框占用的边框后的可用空间元素。我为像我这样不懂 javascript 的人提供了这个解决方案，并花了一个小时寻找解决这个特定问题的方法。