Question

我正在制作带有图像的假电脑屏幕。我有一个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'上删除display：none;并将其隐藏在jQuery中，所以这就是jQuery的样子......

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

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

我还删除了回调函数，因为你不需要它。

单击图像时显示图像

2 个答案: