0

我正在制作一个带有图像的假电脑屏幕。我有一张 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() {
    });
});
4

2 回答 2

0

似乎您不需要来自的回调fadeIn()，只需调用fadeIn

$('.hidden').fadeIn('slow');
于 2013-08-29T19:41:35.250 回答
0

在 css 中的“.hidden”上删除显示：无；并将其隐藏在 jQuery 中，所以这就是 jQuery 的样子......

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

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

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

于 2013-08-29T19:42:22.037 回答