Question

我正在尝试开发类似于下推广告的广告。我想要的是初始高度为90像素，只需点击“显示”按钮，点击按钮后，广告将扩展为200像素。到目前为止我所做的就是我的编码。

HTML

<div id="adsBox">

    <div id="ads">
        <a href="#"> <img src="http://i60.tinypic.com/16gkd5c.jpg" alt="ads"> </a>
        <a href="#" class="expandImage"> <img src="http://i62.tinypic.com/b9hx60.gif" alt="ads">
    </div>

    <p> <a href="#" id="showLink" class="showAds">HIDE</a> </p>
</div>

CSS

#ads {
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    display:none;
}

#adsBox {
    text-align:right;
    color:black;
    width:400px;
    height:90px;
    margin:0 auto;
    background-color:#E0E0E0;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}

#adsBox a {
    color:#535353;
    padding:0;
    margin:0;
}

#adsBox a:hover {
    color:#4682b4;
}

#ads img {
    width:100%;
}

#showLink {
    text-decoration:none;
}

.hideLink {
    display:none;
}   

.expandImage {
    display:none;
}

的jQuery

setTimeout(function () {
        $("#ads").slideToggle(1000);
    }, 1000);

    $(document).ready(function () {
        $('.showAds').click(function () {
            $('#ads').slideToggle(500);
            if ($(this).text() == 'HIDE') {
                $(this).text('SHOW');
            } else {
                $(this).text('HIDE');
            }
        });
    });

这是我的JSFIDDLE。问题是如何使广告的高度从幻灯片中的90像素开始，一秒钟内缩小到200像素？有任何想法吗？

Answer 1

您可以在jQuery中使用animate函数来更改广告的高度。不确定这是不是你要追求的？ http://jsfiddle.net/ewYc3/11/

Answer 2

请注意：您正在尝试显示完整图像（高度为90px），但您将div限制为仅400px宽度。您应该尝试裁剪图像或为#adsBox添加更多宽度，因为div高度从头开始是90px，但是您的图像保持比例并且它只有37px。

使用jQuery滑动的高度不同

2 个答案: