Question

我有四个问题，图像悬停时jquery淡化为黑色：

- 第一个是小问题 - 周围有黑色边框我无法摆脱的图像。
- 第二个是偶尔悬停其中一张图片尺寸减小（见附件截图）
- 第三是我似乎无法提高悬停的速度
- 第四是我希望居中的文字出现在悬停

我是Jquery的新手，所以对任何这些问题的任何帮助都将不胜感激。提前谢谢。

这是CSS：

@charset "UTF-8";
/* CSS Document */

body {
    font-family: 'Questrial', sans-serif;
    background:#f5f5f5;
    border-bottom-left:25px;
    border-left-color:#F0EFF1;
    border-left-height:1000px;
    }

#border {
    position:fixed;
    width:37px;
    height:8000px;
    margin-left:-10px;
    margin-top:0px;
    z-index:2000;
    background-color:#f5f5f5;
    }

#infoleft
    {   
    position:fixed;
    top:20px;
    left:25px;
    font-weight:normal;
    font-size: 15px;
    letter-spacing: 0.14em;
    line-height:1.2em;
    display:block;
    }

#infoleft ul {
    height:20px;
    font-weight:normal;
    font-size: 14.5px;
    letter-spacing: 1px;
    text-decoration:none;
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

#infoleft ul li { 
    display: inline; 
    padding: 10px;
    }


#inforight
    {   
    position:fixed;
    top:21px;
    right:23px;
    font-weight:normal;
    font-size: 14.5px;
    letter-spacing: 1pxem;
    }


#inforight ul {
    height:20px;
    font-weight:normal;
    font-size: 15px;
    letter-spacing: 0.13em;
    text-decoration:none;
    margin: 0;
    padding: 0;
    list-style-type: none;
    }


#images {
    position:absolute;
    left:30px;
    bottom:35px;
    top:100px;
    width:25000px;
    padding-top:80px;
    min-height:500px;



}

img {
    padding:5px;
    height:90%;
}

#images a {
  display: inline-block;
  background: black;
  margin-right: 3px;
  /*adjust to your linking*/
}

#images img {
  pading: 5,5,5,5,;
}

img a:hover {
    color:black;
    opacity:1;
}

a {
    text-decoration:none;
    color:#000;
}

a:hover {
    color:#0080ff;
}

#showinfo {
    position:fixed;
    top:150px;
    left:35px;
    width:20px;
    height:20px;
    font-size:15px;
    z-index:2000;
}

#showinfo a {
    color:#000;
}

#showinfo a:hover {
    color:#0080ff;
    cursor:pointer;
}


#projectInfo {
    position: fixed;
    background: #f5f5f5;
    top: 185px;
    left: 5px;
    width: 280px;
    z-index: 1000;
    padding: 20px 32px 32px 30px;
    height: 280px;
    font-size: 13.5px;
    line-height:1.4em;
    letter-spacing:0.13em;
}

和Html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type='text/javascript' src='jquery.js'></script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dean Pauley — Recent work</title>
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script defer src="js/script.js"></script>
</head>
<body>
<div id="showinfo">
<a href="#" id="showProjectInfo"><span id="showhide">[+]</span></a>
</div>
<div id="projectInfo" style="display: block; ">
            <p>News from Nowhere</p>                            
            <p>—</p>
            <p>A response to The Tyranny of Email by John Freeman exploring how the quality of the written word has deteriorated due to the faster methods of digital communication by contrasting it with that of a pre-digital era. The leather bound-book consists of over 3000 different spam emails.

</p>
</div>
<div id="border">
</div>
<div id="infoleft">
<ul>
<li><a href="index.html">Dean Pauley</a></li>
<li>Graphic Design</li>
<li>mail@deanpauley.co.uk</li>
<li>+44(0)7969 652 219</li>
</ul>
</div>
<div id="inforight">
<ul>
<li><a href="info.html" class="transition">Information</a></li>
</ul>
</div>
<div id="images">
<a href="#"><img src="images/img_off.jpg" /></a>
<a href="#"><img src="images/Calendar1.jpg" /></a>
<a href="#"><img src="images/img_off.jpg" /></a>
<a href="#"><img src="images/Calendar1.jpg" /></a>
<a href="#"><img src="images/img_off.jpg" /></a>
<a href="#"><img src="images/Calendar1.jpg" /></a>
<a href="#"><img src="images/img_off.jpg" /></a>
<a href="#"><img src="images/Calendar1.jpg" /></a>
<a href="#"><img src="images/img_off.jpg" /></a>
<a href="#"><img src="images/Calendar1.jpg" /></a>
<a href="#"><img src="images/img_off.jpg" /></a>
<a href="#"><img src="images/Calendar1.jpg" /></a>
</div>
<script type="text/javascript">
  $(document).ready(function(){
    $("img").hover(function() {
      $(this).stop().animate({opacity: "0.2"}, '300');
    },
    function() {
      $(this).stop().animate({opacity: "1"}, '300');
    });
  });
</script>

  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>


<script type="text/javascript">
$(document).ready(function(){
        $("projectinfo").hide();
        $("showprojectinfo").show();
    $('.show_hide').click(function(){
    $("projectinfo").slideToggle();
    });
});
</script>
<script src="js/script.min.js"></script>
</body>


</html>

截图：

Image with unwanted border

Hover with text

Answer 1

我发现在我的编程中图像越来越小的问题，即使我已经将每个图像完全调整到精确尺寸并缩小文件大小...然后我发现它发生在幻灯片中，如果实际的文件名您的图像在格式名称（以jpeg，gif，png等结尾）之前有一个空格或短划线或其他一些奇怪的字符，这足以产生看起来像图像越来越大的错误关闭，像相机快门一样。如果您返回并简单地重命名图像或删除空格，破折号等，并重新加载它们来处理它并且幻灯片按照您的意图转换。

jquery淡入淡出4个问题

1 个答案: