Question

我知道如何切换整个div，但是我只想隐藏除了前10％或前100px以外的所有内容。然后当点击div时，整个div打开。

我以为我刚才看到了这个，但不记得在哪里。

感谢。

$(document).ready(function() {
 // hides the slickbox as soon as the DOM is ready
  $('#slickbox').hide();

 // toggles the slickbox on clicking the noted link
  $('#slick-toggle').click(function() {
 $('#slickbox').toggle(400);
 return false;
  });
});

Answer 1

看看我主页上的图片，这是你想做的吗？ http://www.carsonshold.com/

当你将鼠标悬停在它上面时，我会将它喷出，但这很容易变成点击。这样做有点复杂，在IE中仍然不完美（页面加载并且只有将鼠标悬停在剪辑上才能识别剪辑）。

它可能与您想要的略有不同，因为我在图像而不是div上执行此操作，因此我需要为剪贴蒙版设置动画。我使用的功能如下：

var featureDuration = 300; //time in miliseconds

    $('#featured-img').hover(function() {
        $(this).animate({ left : "-164", clip: "rect(0px,384px,292px,0px)" },{queue:false,duration:featureDuration});            
    }, function() {
        $(this).animate({ left : "17px", clip: "rect(0px,203px,292px,0px)" },{queue:false,duration:featureDuration});
    });

如果要为剪辑设置动画，则还需要插入此JS，否则它将无法正常运行。 http://www.overset.com/2008/08/07/jquery-css-clip-animation-plugin/

如果您不确定我是如何完成剩下的工作，请查看我的代码中的CSS，如果您有任何问题，请在此处发表评论。

干杯

Answer 2

这样做相当快，注意它只会隐藏底部。

http://jsfiddle.net/loktar/KEjeP/

简单切换可更改高度，隐藏其余内容。也足够容易制作动画，只需修改切换功能即可调整高度而不是添加类。

Answer 3

您的代码应该是以下内容：

$(document).ready(function() {
    // hides the slickbox as soon as the DOM is ready
    $('#slickbox').animate({height: '20px'});

    // toggles the slickbox on clicking the noted link
    $('#slick-toggle').click(function() {
        $('#slickbox').animate({height: '100%'});
        return false;
    });
});

隐藏部分div - 单击时打开

3 个答案: