0
這是代碼。我也無法制作不透明的動畫。動畫CSS值左側和不透明不適用於jQuery？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<style type="text/css">
body{
background: #000;
color: #fff;
font-family: Arial, sans-serif;
}
.menu{
position: absolute;
top: 10px;
left: 0px;
z-index: 11;
width: 700px;
height: 60px;
}
.menu a{
background-color: #808080;
margin-bottom: 2px;
display: inline;
width: 150px;
height: 60px;
color: #fff;
line-height: 60px;
text-align: center;
text-transform: uppercase;
outline: none;
}
.menu a:hover{
color: #000;
background-color: #fff;
}
#main-wrapper{
position: absolute;
left: 1000px;
top: 10px;
width: 900px;
height: 380px;
background-color: #000;
opacity: 0.1;
filter: alpha(opacity=10);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=10);
z-index: 9999;
zoom: 1;
color: #fff;
}
#main-wrapper .active{
display: block;
}
.id-two{
padding: 10px;
display: none;
}
.id-three{
padding: 10px;
display: none;
}
.id-four{
padding: 10px;
display: none;
}
#slider_window{
position: relative;
left: 110px;
width: 85%;
height: 400px;
background-color: #8ae234;
overflow: hidden;
top: 120px;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function($){
var current_elem_class;
var close_active_page = function(current_id){
if(current_id != current_elem_class){
var left_position = '1000px';
$("#main-wrapper").stop().animate({
opacity : 0.1,
left : left_position
}, {
"duration": 700,
//"easing": "easeInOutBack",
complete: function(){
//alert('complete');
if(typeof current_elem_class != 'undefined'){
$("div." + current_elem_class).removeClass('active');
current_elem_class = current_id;
if(current_id != 'id-one'){
open_non_active_page("div." + current_elem_class);
}
}else{
current_elem_class = current_id;
if(current_id != 'id-one'){
open_non_active_page("div." + current_elem_class);
}
}
}
});
}
}
var open_non_active_page = function(elem){
var left_position = '10px';
$(elem).addClass('active');
$("#main-wrapper").stop().animate({
opacity : 0.6,
left: left_position
},{
"duration": 700,
//"easing": "easeInOutBack",
complete: function(){
$("#main-wrapper").stop().animate({
opacity : 1.0,
left: left_position
},{
"duration": 1000
});
}
});
}
$("a.button").bind('click',function(){
close_active_page($(this).attr('id'));
});
})
</script>
</head>
<body>
<div id="menu" class="menu">
<a href="#" id="id-one" class="button close_all">Close all</a>
<a href="#" id="id-two" class="button">Close all - Open Two</a>
<a href="#" id="id-three" class="button">Close all - Open Three</a>
<a href="#" id="id-four" class="button">Close all - Open Four</a>
</div>
<div id="slider_window">
<div id="main-wrapper" class="">
<div class="id-two">
<p><h2>Two</h2><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent adipiscing, magna a porttitor consequat, libero augue gravida lacus, vitae blandit elit eros sed sem. Pellentesque convallis aliquam ante at pretium. Nam at semper ligula. Integer blandit tellus in libero accumsan eleifend. Maecenas hendrerit ante velit. Aenean ultricies vehicula iaculis. Aliquam id orci et lacus egestas elementum. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam viverra sollicitudin tortor, at ultricies enim mollis ut. Etiam facilisis vulputate justo, sed venenatis justo ullamcorper porta.</p>
</div>
<div class="id-three">
<p><h2>Three</h2><br />Aliquam id orci et lacus egestas elementum. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam viverra sollicitudin tortor, at ultricies enim mollis ut. Etiam facilisis vulputate justo, sed venenatis justo ullamcorper porta.</p>
</div>
<div class="id-four">
<p><h2>Four</h2><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit lacus, cula iaculis. Aliquam id orci et lacus egestas elementum. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibutor, at ultricies enim mollis ut. Etiam faci</p>
</div>
</div>
</div>
</body>
</html>
Tnx，一個問題，這個隊列如何解決這個問題？我已經嘗試過，但我已經把它放在每一個動畫上。 – user147
隊列：假不是解決方案。只是刪除stop（）方法。 queue：false是處理動畫時的另一種選擇，而不是stop（）。我只是把它留在那裏作爲一個選項。在這裏它什麼都不做，所以你可以刪除它。 http://css-tricks.com/examples/jQueryStop/ – zdrsh
Ohhhhhh，謝謝，現在我看到停止被刪除，感謝您的鏈接 – user147