다음 코드가 있습니다.
<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/ 만든 jsfiddle 입니다.
마지막으로 내가 전환에서 원하는 종류의 링크를 얻었습니다.이 페이지를 참조 하십시오. 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>
감사
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다