Question

我有一个html布局： -

<div id="left-column" style="200px"></div>
<div id="center-column"></div>
<div id="right-column"></div>

在左栏中，我有一些链接与下面的功能，一个用于增长中心列，另一个用于缩小它。

目前： -

OPTION 1 does both left and right columns

OPTION 2 works but throws an error in IE SCRIPT438: Object doesn't support property or method '$' which refers to the .$('#right....

OPTION 3 works growing but does not shrinking

任何想法的人？

由于

//GROWING
//OPTION 1:
    $('#center-column').animate({ width: '0px' }, 500).siblings().animate({ 'width': ($(window).width() - cLeft) + 'px' });
//OPTION 2:
    $('#center-column').animate({ width: '0px' }, 500).$('#center-column').animate({ 'width': ($(window).width() - cLeft) + 'px' });
//OPTION 3:    
$('#center-column').animate({ width: '0px' }, 500).next().animate({ 'width': ($(window).width() - cLeft) + 'px' });

//SHRINKING
        var rightwidth = $(window).width() - (cCenter + cLeft + cMargin);
//OPTION1
        $('#center-column').animate({ width: cCenter + 'px' }, 500).next().animate({ 'width': rightwidth + 'px' });
//OPTION2
        $('#center-column').animate({ width: cCenter + 'px' }, 500).siblings().animate({ 'width': rightwidth + 'px' });
//OPTION3:
        $('#center-column').animate({ width: cCenter + 'px' }, 500).$('#right-column').animate({ 'width': rightwidth + 'px' });

Answer 1

//GROWING
    //OPTION 2:
        $('#center-column').animate({width: '0px'}, 500, function() {
            $('#center-column').animate({'width': ($(window).width() - cLeft) + 'px'});
        });

//SHRINKING
    //OPTION3:
        $('#center-column').animate({width: cCenter + 'px'}, 500, function() {
            $('#right-column').animate({'width': rightwidth + 'px'});
        })

兄弟姐妹只在右边或使用$（ID）.something。$（ID2）.something或next（）

1 个答案: