使用jQuery滑動的不同高度

我正在嘗試開發類似於下推廣告的廣告。我想要的是初始高度爲90像素，點擊「顯示」按鈕，點擊按鈕後，廣告將被擴展爲200像素。我迄今爲止所做的就是我的編碼。使用jQuery滑動的不同高度

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像素之前？有任何想法嗎？

來源

2014-03-13 Anthosiast

您可以使用jQuery中的animate函數來更改廣告的高度。不知道這是你之後的事情嗎？ http://jsfiddle.net/ewYc3/11/

來源

2014-03-13 02:48:17 vbn

你好，這是我後面的權利。但問題我有2個不同的圖像。 1張圖片的高度爲90px，另一張圖片的高度爲200px。我想知道如何在開始時隱藏200px的圖像，並且只有點擊SHOW按鈕纔會顯示圖像。（開始時，屏幕只顯示90px高度）。 – Anthosiast

您可以將img作爲'a'標籤的背景，爲其創建2個類，一個用於90px高度img，另一個用於200px高度img。點擊按鈕時，您可以切換課程，也可以爲標籤的高度設置動畫，以創建流暢的動畫。看一下這個http://jsfiddle.net/ewYc3/16/ – vbn

此外，圖像的大小必須與容器的大小相匹配，以比例表示，以便它完全適合該空間。 – vbn

請注意：您正在嘗試顯示完整圖像（其高度爲90px），但您將div限制爲只有400px的寬度。您應該嘗試裁剪圖像或爲#adsBox添加更多寬度，因爲div高度從開始就是90px，但圖像保持比例，僅爲37px。

來源

2014-03-13 02:11:33 devrique

使用jQuery滑動的不同高度

回答

相關問題