我有以下代码
<div id="wrapper">
<div id="article">
<a href="#">Here is a text containg something</a>
</div>
</div>
<style>
#wrapper {
height:200px;
width:500px;
background:url(http://3.bp.blogspot.com/-06iGd_Ue9dk/UqPzuA1Kw7I/AAAAAAAACPc/hBtKtRBSDGE/s1600/Pattern-call.png);
-moz-transition: background-color 2s linear;
transition: background-color 2s linear;
}
#article {
background: url("http://4.bp.blogspot.com/-5BAxq07aDQA/UgdY3Mk8spI/AAAAAAAAB84/ElxocGOzgYA/s1600/Opacity.png") repeat scroll 0 0 rgba(0, 0, 0, 0.4);
margin-top:50px;
margin: 0 auto;
width: 100px;
padding:10px;
position: relative;
top:60px;
}
#article a {color:#fff;
text-decoration:none;
}
.hover {
background:rgba(0, 0, 0, 0.4) !important;
}
</style>
<script>
$('#wrapper > div').hover(function(){
$(this).parent().toggleClass('hover');
})
</script>
我现在面临两个问题-1.我不想要悬停时的渐变效果，而是背景颜色从左开始到右结束的过渡。(正如我们在加载效果中看到的)2.其次，随着背景更改的完成，我希望浏览器将用户重定向到锚点链接(光标仍处于悬停状态)
我在设置两者时遇到了问题。非常感谢您的帮助。
这是我做的一把小提琴http://jsfiddle.net/MjkC5/1/供您参考。
终于得到了一个链接，我想在过渡中看到什么样的东西http://bloggingstory-shameer.rhcloud.com/sample-post-for-ghost/看看背景如何随着页面的加载而变化，我想要同样的效果。CSS更可取，但我也不介意Jquery。
下面的代码正是您想要的。看看它是否有帮助。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.animated_div').animate({ 'width':'300px' }, 2000);
})
</script>
<style type="text/css">
.wrapper {width:300px; height:100px; background:#000; position:relative;}
.animated_div {position:absolute; top:0px; left:0px; width:0px; height:100px; background:#BABABA;}
</style>
</head>
<body>
<div class="wrapper">
<!--you can put anything inside here-->
<div class="animated_div">
</div>
</div>
</body>
</html>
感谢