jquery淡出悬停4个问题_Jquery_Html_Css_Text_Hover

jquery淡出悬停4个问题

jquery html css text

jquery淡出悬停4个问题,jquery,html,css,text,hover,Jquery,Html,Css,Text,Hover,jquery在图像悬停时淡入黑色有四个问题： -第一个是一个小问题——在边界周围有一个黑色边界我无法摆脱的图像 -第二个是偶尔在其中一个图像上悬停尺寸减小（见所附屏幕截图） -第三，我似乎无法提高悬停的速度 -第四个是，我希望中心文本出现在悬停状态我对Jquery真的是一个新手，所以如果您对这些问题有任何帮助，我将不胜感激。提前谢谢以下是CSS： @charset "UTF-8"; /* CSS Document */ body { font-family: 'Questri

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>


保利院长-近期工作
不知从何而来的消息
-
约翰·弗里曼（John Freeman）对电子邮件暴政的回应，通过与前数字时代的对比，探讨了由于数字通信方式的加快，书面文字的质量如何恶化。这本皮装书由3000多封不同的垃圾邮件组成。



平面设计
mail@deanpauley.co.uk
+44（0）7969 652 219




$（文档）.ready（函数（）{
$（“img”）.hover（函数（）{
$（this.stop（）.animate（{opacity:“0.2”}，'300'）；
},
函数（）{
$（this.stop（）.animate（{opacity:“1”}，'300'）；
});
});
window.jQuery | | document.write（“”）
$（文档）.ready（函数（）{
$（“projectinfo”）.hide（）；
$（“showprojectinfo”）.show（）；
$（'.show_hide'）。单击（函数（）{
$（“projectinfo”）.slideToggle（）；
});
});

截图：

我发现，在我的编程过程中，图像变小了，甚至当我专门将每个图像的大小调整到精确的尺寸并减小了文件大小时，也会出现这样的问题。。。然后我发现，如果图像的实际文件名在格式名称（以jpeg、gif、png等结尾）之前有空格、破折号或其他奇怪的字符，则在幻灯片中会发生这种情况，这足以产生一个错误，看起来图像越来越大，越来越小，越来越近，就像照相机快门一样。如果您返回并简单地重命名图像或删除空格、破折号等，然后重新加载它们，以便按照您的预期处理图像和幻灯片的过渡。

对于边框，您可以尝试添加

边框：无用于#图像。一个与您的主要问题不同的问题。包括两个不同版本的jquery和'script.js'，你想用什么来存档？对不起，我不太明白。你能解释一下吗？@deanpuley他的意思是，当你只需要一次jQuery库时，你要调用它两次（src='jQuery.js'和“）。script.js可能是另一个插件，如果不是底部的插件，那么也要删除它。你能吗？