Question

我已经完成了这项工作。这样的事情JSFIDDLE。但我想再深入一点。我想在页面加载时自动展开。但是，到目前为止我尝试过并且无法完成这项工作。这是我的编码。

HTML

<div id="adsBox">
        <a id="ads" class="bg90" href="#"></a>
        <div> <a id="showLink" class="showAds">SHOW</a> </div>
</div>

CSS

 #adsBox{
    text-align:right;
    width:400px;
    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;
}
#ads{

    display: block;
}

.bg90
{
    background: url(http://i60.tinypic.com/16gkd5c.jpg) 400px 90px;
    height: 90px;
}
.bg200
{
    background: url(http://i60.tinypic.com/b9hx60.gif) 400px 200px;
    height: 200px;
}
#adsBox a {
    color:#000;
    padding:0;
    margin:0;
    cursor: pointer;

}

#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);
    }, 300);

$(document).ready(function () {
    $('.showAds').click(function () {
        if ($(this).text() == 'HIDE') {
            $(this).text('SHOW');
            $('#ads').animate({height:"90px"}, 400, function() { $('#ads').toggleClass('bg200'); });
        } else {
            $(this).text('HIDE');
            $('#ads').animate({height:"200px"}, 400);
            $('#ads').toggleClass('bg200');
        }

    });
});

问题是，当页面加载时，图像会向上滑动。我想要的是图像（高度90px）将自动扩展到（高度200px）。有什么想法吗？

Answer 1

试试这个： http://jsfiddle.net/ewYc3/26/（3秒后的方法）

$(document).ready(function () {
    setTimeout(function() {
    goToggle();
}, 3000);
    $('.showAds').click(function () {
        goToggle();
    });
});
function goToggle(){
   if ($('.showAds').text() == 'HIDE') {
    $('.showAds').text('SHOW');
    $('#ads').animate({height:"90px"}, 400, function() { 
        $('#ads').toggleClass('bg200'); });
    } else {
        $('.showAds').text('HIDE');
        $('#ads').animate({height:"200px"}, 400);
        $('#ads').toggleClass('bg200');
    }
}

滑块设置功能

1 个答案: