單擊圖像時顯示圖像

Question

我正在制作帶有圖像的假電腦屏幕。 我有一個Firefox圖標的圖片，當鼠標懸停在Firefox圖標上時，它的大小增加了，我希望在單擊該圖標的圖片時出現另一張圖片。 這是我所能獲得的最接近的。

<html>
<title> Scope </title>

<link type="text/css" rel="stylesheet" href="stylesheet.css"/>

<embed src="73797^alarmclock.mp3"; autostart="true"; loop="true"; hidden="true";/>

  <body>
         <img src ="alarm clock2.jpg"/>

     <p>  Pulling the sheets into my body, I begin to sink back into the bed... 
          uggh... my alarm clock... time to get up..

         <img id="computerscreen" src= "computer.jpg"/>

         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
         <script src="script.js"></script>

         <img  id="grow" src="icon2.gif"/> 

         <img class="show hidden" src="screen2.jpg" />



</body>

這是CSS

#grow{
    position:absolute; 
    top:1157px; 
    left:599px; 
    width:47px; 
    z-index:4; 
    height:47px;
}

#grow:hover{
    top:1137px; 
    left:589px;
    width: 70px; !important;
    height: 70px; !important;
    cursor:pointer;
}

.hidden {
    display:none;
    position:absolute; 
    top:300px; 
    right: 0px; 
    width:850px;
    height:550px;
    z-index:6;
}

#computerscreen{
    position:absolute; 
    top:300px; 
    right: 0px; 
    z-index:3;
}

和腳本

$(document).ready(function(){
    $('#grow').click(function() {
        $('.hidden').fadeIn('slow', function() {
    });
});

Answer 1

似乎您不需要從fadeIn()進行回調，只需調用fadeIn

$('.hidden').fadeIn('slow');

Answer 2

在CSS的'.hidden'上刪除顯示：無； 並將其隱藏在jQuery中，這就是jQuery的外觀...

$(document).ready(function () {
    $('.hidden').hide();

    $('#grow').click(function () {
        $('.hidden').fadeIn('slow');
    });
});

我還刪除了回調函數，因為您不需要它。

單擊圖像時顯示圖像

問題描述

2 個解決方案

解決方案1
0 2013-08-29 19:41:35

解決方案2
0 2013-08-29 19:42:22

單擊圖像時顯示圖像

問題描述

2 個解決方案

解決方案1 0 2013-08-29 19:41:35

解決方案2 0 2013-08-29 19:42:22

解決方案1
0 2013-08-29 19:41:35

解決方案2
0 2013-08-29 19:42:22